删除vuejs中更新的v-model复选框属性



我有一个输入复选框标记,在我的v模型中更新后,我正试图删除它。

这是我的输入标签:

<input
v-model="checked"
type="checkbox"
id=""
value="jackets"
>

我通过做这个得到v模型值属性

{{checked}} 

请告诉我如何将删除函数添加到我的v-model属性中,如果我单击删除函数,复选框将被取消选中。

如果我理解正确,请尝试以下代码片段(只需将检查的属性设置为false(:

new Vue({
el: '#demo',
data() {
return {
checked: true,
filters: [{name: 'XXL', state: false}, {name: 'Grey', state: false}]
}
},
methods: {
del() {
this.filters.forEach(f => f.state = false)
},
rem(i) {
this.filters[i].state = false
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div v-for="(filter, i) in filters" :key="i">
{{ filter.name }}
<input
v-model="filter.state"
type="checkbox"
id=""
:value="filter.name"
/>
<button @click="rem(i)">X</button>
</div>
Remove All
<input
type="checkbox"
id=""
@input="del"
/>
</div>

最新更新