【无标题】

项目场景：element-ui中的选择器数据回显value而不是label

问题描述

提示：前端选择器依据选择器 下拉框来选择配置，弹出的选择器数据为后端返回，但是发现后端返回form.test的值为数值1，前端显示1，而不是“能”。

          <el-select v-model="form.test">
            <el-option label="能" value="1" />
            <el-option label="否" value="0" />>
          </el-select>

原因分析：

提示： v-model绑定的这个字段，定义的是一个Integer类型，但是在el-option中我的value是一个字符串，所以 1 ！= “1” ，这就导致这两个不能匹配，于是label值就显示不了，只能显示value的值。而其中的 :value ，其实是个缩写，这个缩写在 :value 前面隐去了v-bind。完整的语法应该是 v-bind:value ，而这个v-bind主要就用于属性绑定。以上是Vue官方提供的一个简写方式。

---

解决方案：

提示：下面两个均可

• 1

          <el-select v-model="form.test">
            <el-option label="能" :value="1" />
            <el-option label="否" :value="0" />>
          </el-select>

• 2

          <el-select v-model="form.test">
            <el-option label="能" :value="parseInt(1)" />
            <el-option label="否" :value="parseInt(0)" />
          </el-select>