元素选择组件取值注意事项详解

不要详细说明select组件的用法，而是检查select组件的用法。

主要说一下注意事项：

选择组件可以动态生成选项，选项与相应的文本值和值绑定。

有时候我们发现默认显示的内容会显示特定的值值，而不是对应的文本。造成这种情况的原因是：

v-model绑定的值与选项选项值的值类型不匹配。

惯例是数字和字符串

一般我们将循环一个数组，对象生成选项

1.简单数组

const array1=[1，2，3]El-select v-model=' seletValue ' El-option v-for=' array 1中的项' : key=' item ' : value=' item ' : label=' item '/El-option/El-select此时，选项的值为数字类型，selet由v-model绑定

2.对象数组

const Arrayooptions=[{key:0，text:'a'}，{key:0，text:'b'}，{ key :0，text : ' c ' }]El-select v-model=' seletValue ' El-option v-for=' Arrayooptions ' : key=' item . key ' : value=' item . key ' 3: label

此时，选项的值为数字类型，v-model绑定的seletValue也必须为数字类型，例如seletValue=1

3.目标

const options={0:'a '，1:'b '，2:'c '，} El-select v-model=' seletValue ' El-option v-for='(value，Key)在options ' : Key=' Key ' : value=' Key ' : label=' item '中。value'/el-option/el-select因为在json对象的key :值结构中，键都是字符串类型的，这里我们把json的键作为option的值。

此时，option的值实际上是字符串类型，v-model绑定的seletValue也必须是字符串类型，比如seletValue='1 '

如果提交界面的数据要求是数字，提交数据前只需转换数字(seletValue)即可

在这种情况下，可以参考上面的情况来检查代码调试

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。