今天遇到一个使用el-select的时候,需要获取值为对象,使用Select 组件的绑定值是一个数组,但是数组的值只能传入 Number 类型或者 String 类型的数据,如果我们想向其中传入一个对象就会出错。
怎么办呢?
我们可以发现是缺少一个索引,查看了elemnet-ui 的文档,可以看到 Select 组件有一个属性:value-key
那么下面我们来试试用一下这个属性:
<el-select v-model="test" value-key="id" @change="changeValue">
<el-option v-for="item in arr" :label="item.name" :key="item.id" :value="item"></el-option>
</el-select>
data() {
return {
test: "",
arr: [
{ id: 1, name: "张三" },
{ id: 2, name: "李四" },
{ id: 3, name: "王五" }
]
};
},
methods: {
changeValue(value) {
console.log("value", value);
console.log(this.test,'thie.test')
}
},
写好了之后,我们运行一下代码:
验证成功!我们拿到的值是一个对象了。