1.背景
在使用 el-select 的时候,经常会通过 change 事件来获取当前绑定的 value ,即对象中默认的某个 value 值。但在某些特殊情况下,如果想要获取的是点击项的整个对象 item,该怎么做呢?
2.实例
elementUI 中是可以支持获取点击项的整个对象的。
需注意 value-key="id" :value="item"
<template><el-selectv-model="value"multiplev-model="obj" value-key="id" @change="change"><el-optionv-for="item in options":key="item.value":label="item.label":value="item"></el-option></el-select>
</template><script>export default {data() {return {value:'',options: [{id: 1,label: '黄金糕'}, {id: 2,label: '双皮奶'}, {id: 3,label: '蚵仔煎'}, {id: 4,label: '龙须面'}, {id: 5,label: '北京烤鸭'}],value1: [],value2: []}},methods: {change(item) {console.log(item);// 打印整个对象}}}
</script>
延伸:
vue.runtime.esm.js:619 [Vue warn]: <transition-group> children must be keyed: <ElTag>
在选择点击获取某个值是,“未选中”,原因为:value-key="id" id的值为数值类型
value-key="''+id" 将数值类型转换为字符串类型即可