复选框为false时调用另一个突变

Question

<li v-for='item in resultQuery' :key='item.id'>    
<label class='custom-checkbox'>
<input type='checkbox' :value='item' v-model='checkBrands'>
<span @click='loadProducts(item.seoName)>{{ item.title }} 
</span>
</label>
</li>

在checkBrands中，我的品牌名称被转移。当点击复选框时，会调用一个突变，加载产品(api(。

if(this.checkBrands != 0) {
this.$store.commit(
'showFilteredList',
response.data.items
);
} else {
this.$store.commit(
'deleteCheckboxItems',
response.data.items
);
}

如果复选框为false，我想调用另一个突变。(清除列表(当为false时，我如何调用另一个突变，如果为false，我应该如何跟踪？

filter.js

state: {
filteredBrands: []
},
mutations: {
showFilteredList(state, payload) {
state.filteredBrands.payload;
if(payload.length < 1) {
return;
}
state.filteredBrands.push(...payload);
},
deleteCheckboxItems(state, checkboxValue) {
state.filteredBrands = state.filteredBrands.filter((item) => 
item.id == checkboxValue);
}
}

更新

有几个复选框。如果选中showFilteredList复选框，则一切正常。按下时，调用突变showFilteredList(复选框为true(，再次按下时(false(，从store.filteredbrands.中删除产品

不能：正确的条件应用于每个复选框。

并且条件this.checkBrands != 0不正确，因为他们将检查数组的长度。(id(

Answer 1

嗨，您可以使用checkBrands，并在data(){return {checkBrands: null}}中确定您想要的方法

<input 
type="checkbox" 
:value="item.title" <--- its not value it is :value
v-model="checkBrands" <----- its not :v-model it is v-model
@click="checkBrands === true ? loadProducts('1st method') : someOtherMethod('2nd method')"
>

在：

import { mapMutaions } from 'vuex' ,<--- dont forget this import
export default {
data(){
return{
...
}
},
methods:{
...mapMutation(['oneMutation', 'secondMutation']),
loadProducts(item){
this.oneMutation()
console.log('loadproducts', item);
},
someOtherMethod(item){
this.secondMutation()
console.log('otherproducts', item);
}
}

或者你可以做@click="loadProducts()"，然后在loadProducts方法中，你可以根据checkBrands道具来确定你想调用什么突变。

loadProducts(){
if(this.checkBrands === true){
this.oneMutation()
}else{
this.secondMutation()
}