el-select加入change事件报key值重复
时间: 2023-08-17 20:07:16 浏览: 197
解决vue elementUI 使用el-select 时 change事件的触发问题
你可以通过给每个 el-select 元素设置不同的 key 值来解决 "key 值重复" 的问题。这样,每个 el-select 元素都会有一个唯一的 key 值,从而避免冲突。
例如,你可以使用一个变量来生成唯一的 key 值,比如使用一个计数器来自增:
```html
<el-select :key="`select-${selectId}`" @change="handleChange">
<!-- select options -->
</el-select>
```
在你的组件中,定义一个计数器变量 `selectId`,并在每次生成 el-select 元素时自增它:
```javascript
export default {
data() {
return {
selectId: 0
};
},
methods: {
handleChange(value) {
// 处理 change 事件
}
},
mounted() {
// 其他逻辑...
this.selectId++; // 自增 selectId
}
}
```
这样,每个 el-select 元素都会有一个不同的 key 值,并且你可以在 `handleChange` 方法中处理 change 事件。
阅读全文