后台返回给前端的数据通过id显示对应的name

1：如果数据很多的情况这么写太麻烦

            <ul v-for="(item,index) of pcContInfoVOList" :key="index">
                <li>
                    <h1>
                        <span>{{item.serviceTypeText}}</span>
                        <span>
                            <template v-if="item.signStatus == 1">待签署</template>    
                            <template v-else-if="item.signStatus == 2">草稿</template>    
                            <template v-else-if="item.signStatus == 3">生效中</template>   
                            <template v-else>已到期</template> 
                        </span>
                    </h1>
                    <p>
                        <span>开始时间：</span>
                        <i>{{item.startDate}}</i>
                    </p>
                    <p>
                        <span>结束时间：</span>
                        <i>{{item.signDate}}</i>
                        <button @click='sign(item.id)'>签署</button>
                    </p>
                    <p style='display:none'>{{item.id}}</p>
                </li>
            </ul>

2：换个例子，这样写简单
表格回显下拉框的 name 值通过 id 显示 name
调用方法将 id 传过去

<el-table-column
  show-overflow-tooltip
  prop="id"
  label="品类"
  align="center"
  width="150"
 >
	<template slot-scope="scope">{{getCategoryName(scope.row.id)}}</template>
</el-table-column>

this.ProductDataListCategory 是下拉框所有的数据，通过 id 把 name return 出来

getCategoryName(id) {
      if (!id) {
        return null;
      }
      for (let i = 0, len = this.ProductDataListCategory.length; i < len; i++) {
        let item = this.ProductDataListCategory[i];
        if (item.id == id) {
          return item.name;
        }
      }
      return null;
},