vue json数据显示问题？

Question

后台给我的数据是数字，但是却要我用文字来替换数字的状态，比如是这样的

但是实际上那recordLimit要显示是文字，而不是-1，所以我用了swtich的方法换成文字显示成这样

    setSub(sub) {
      let page = "";
      switch (sub) {
        case 5:
          page = "5";
          break;
        default:
          page = "无限制";
          break;
      }
      return page;
    },

效果是实现了，但是又出问题了，当我点击编辑的时候，弹窗的表格数据却又不和页面的数据相同了

会议次数显示应该是无限制，而不是-1才对，因为我用的是element-admin开发的，
代码是

      <el-table-column class-name="status-col" width="280" label="会议次数">
        <template slot-scope="scope">
          <span>{{setSub(scope.row.recordLimit)}}</span>
        </template>
      </el-table-column>

        <el-form-item label="会议次数" prop="recordLimit">
          <el-select v-model="form.recordLimit" placeholder="请选择创建会议次数">
            <el-option
              v-for="item in chargeOptions"
              :key="item.num"
              :label="item.display_recordLimit"
              :value="item.num"
            />
          </el-select>
        </el-form-item>

因为要绑定到显示页面的数据，但是弹窗绑定页面的数据却只是和json数据一样，而不是我用switch方法，代替数字换成文字的显示效果，有大佬可以帮忙解决一下吗？

Answer 1

因为你用的是下拉框，所以你下拉框中的值必须是和下拉框中定义的字段一致才行，所以要这样做：
当你拿到请求后，用switch去转换的时候，比如你是这样：page = 5, 然后你要给item 赋值为page ,即 this.item = page

Answer 2

chargeOptions = [{value: '5',label: '5'}, {value: '-1',label: '无限制'}]