取消选中绑定到Vuex store state数组项的复选框可以通过以下步骤实现:
v-model
指令中,将其绑定到对应的数组项。<template>
<div>
<label v-for="(item, index) in items" :key="index">
<input type="checkbox" v-model="item.checked" />
{{ item.label }}
</label>
</div>
</template>
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
items: [
{ label: 'Item 1', checked: false },
{ label: 'Item 2', checked: true },
{ label: 'Item 3', checked: false },
],
},
// ...
});
// store.js
export default new Vuex.Store({
// ...
mutations: {
uncheckItem(state, index) {
state.items[index].checked = false;
},
},
});
mapMutations
辅助函数将mutations映射到组件的methods中,并调用该方法取消选中复选框。<template>
<div>
<label v-for="(item, index) in items" :key="index">
<input type="checkbox" v-model="item.checked" @change="uncheckItem(index)" />
{{ item.label }}
</label>
</div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
// ...
methods: {
...mapMutations(['uncheckItem']),
},
};
</script>
通过以上步骤,当复选框的选中状态改变时,调用uncheckItem
方法取消选中绑定到Vuex store state数组项的复选框。
领取专属 10元无门槛券
手把手带您无忧上云