。
在VueJS中,当我们使用v-model指令将复选框绑定到一个数组属性时,取消选中复选框不会从数组中移除对应的值。这是因为VueJS默认使用对象的引用来判断是否选中,而不是根据值来判断。
解决这个问题的方法是使用VueJS提供的修饰符.sync。通过在v-model指令中添加.sync修饰符,VueJS会将数组中的值与复选框的选中状态保持同步。
示例代码如下:
<template>
<div>
<label v-for="item in items" :key="item.id">
<input type="checkbox" :value="item" v-model="selectedItems.sync" />
{{ item.name }}
</label>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
],
selectedItems: []
};
}
};
</script>
在上述代码中,我们使用v-for指令遍历items数组,并将每个复选框的值绑定到selectedItems数组中。通过添加.sync修饰符,取消选中复选框会从selectedItems数组中移除对应的值。
关于VueJS的更多信息和相关产品,你可以参考腾讯云的文档和官方网站:
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云