el-select获取该值的对象数据
时间: 2023-11-10 14:05:17 浏览: 84
可以通过 `v-model` 绑定选中值,然后在选中值发生变化时触发 `change` 事件,从而获取选中值的对象数据。
例如,假设我们有一个 `el-select` 组件,其选项数据为一个数组 `options`,每个选项对象都有 `id` 和 `name` 属性,我们想要获取选中项的完整对象数据。代码如下:
```html
<template>
<div>
<el-select v-model="selectedOption" @change="handleChange">
<el-option v-for="option in options" :key="option.id" :value="option.id">{{ option.name }}</el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ id: 1, name: 'Option 1' },
{ id: 2, name: 'Option 2' },
{ id: 3, name: 'Option 3' },
],
selectedOption: null,
};
},
methods: {
handleChange() {
const selectedOption = this.options.find((option) => option.id === this.selectedOption);
console.log(selectedOption);
},
},
};
</script>
```
在上面的代码中,我们使用 `v-model` 将选中值绑定到 `selectedOption` 属性上,并在选中值发生变化时触发 `handleChange` 方法。`handleChange` 方法中,我们使用 `Array.find()` 方法查找选中项的完整对象数据,并将其打印到控制台。
阅读全文