VUE element-UI 的 el-select 绑定对象类型，设置初始值，不能正确显示

element-UI 的 el-select 组件里，当v-model 绑定为对象类型，并对其设定默认值<el-select v-model="form.InWindowPositionType"><el-option v-for="item in positionList" :value="item.value" :key="item.value" :la...

你狗

5707人浏览 · 2018-10-12 10:14:00

你狗 · 2018-10-12 10:14:00 发布

element-UI 的 el-select 组件里，当 v-model 绑定为对象类型，并对其设定默认值

<el-select v-model="form.InWindowPositionType">
    <el-option v-for="item in positionList" :value="item.value" :key="item.value" :label='item.label'></el-option>
</el-select>

在 data 中设 form.InWindowPositionType 与列表的 value 相等，则认为对 selected 设置了默认值，但是选择器里的显示结果为 value 值，而非 label ，

{ value: 1, label: 'java' },
{ value: 2, label: 'node' },
{ value: 3, label: 'python' },

问题在于数据类型，form.InWindowPositionType 的值为 String ，而列表的 value 为 Number，并不全等，导致无法找到对应的项。。。所以需要对数据类型进行转换

转载于:https://www.cnblogs.com/_error/p/9776582.html

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^