@selection-change获取取消勾选的值
时间: 2024-03-01 21:51:47 浏览: 21
如果你想在一个多选框中获取取消勾选的值,可以使用@change事件。当一个选项被取消勾选时,@change事件会触发并传递一个包含所有选中选项值的数组。你可以通过将当前选项的值从数组中删除来获取取消勾选的值。例如:
```
<template>
<div>
<div v-for="option in options" :key="option.value">
<input type="checkbox" :value="option.value" v-model="selectedOptions" @change="handleSelectionChange(option.value)">
<label>{{ option.label }}</label>
</div>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' },
],
selectedOptions: [],
};
},
methods: {
handleSelectionChange(value) {
if (!this.selectedOptions.includes(value)) {
// 选项被取消勾选
console.log(`取消勾选了选项 ${value}`);
}
},
},
};
</script>
```
在上面的代码中,当一个选项被取消勾选时,`handleSelectionChange`方法会检查当前选中的选项数组中是否包含该选项的值。如果不包含,则说明该选项刚刚被取消勾选,可以在控制台中输出一些信息。