存储处理程序外的错误vuex突变

Question

在我的程序中，我有一个表单。这个表单有两个复选框和一个提交按钮。当你点击一个复选框时，它会将其保存到一个变量中，当你点击按钮时，该变量会被推送到我的vuex商店。这部分效果很好。

在点击提交之前，我还可以根据需要多次选择和取消选择复选框。

但是，如果我返回到表单，并单击其中一个复选框，则会引发以下错误：CCD_ 1。这就是我的困境。我看过其他提出同样问题的人，普遍的共识是，要么我使用v-model，要么我必须将其从vuex的严格模式中删除。我没有任何v-models，我想让它处于严格模式。

这是表单和提交按钮。

<v-expansion-panel class='panelButton'>
<v-expansion-panel-header class='searchCardTitle'>Category of tool</v-expansion-panel-header>
<v-expansion-panel-content>
<v-checkbox dense hide-details=true v-for="tools in toolCategory" :key=tools :label=tools  @click="addMobileFilter(tools)" class="checkboxText"/>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel class='panelButton'>
<v-expansion-panel-header class='searchCardTitle'>Strategies</v-expansion-panel-header>
<v-expansion-panel-content>
<v-checkbox dense hide-details=true v-for="(tools,index) in toolStrategies" :key=tools :label=tools :value=toolStrategiesValues[index]  @click="addMobileFilter(toolStrategiesValues[index])" class="checkboxText"/>
</v-expansion-panel-content>
<v-card-actions class="justify-center">
<v-btn color="#699ad6" @click="updateMobileFilter()" class='white--text' style="margin 1rem 0 2rem 0">Apply</v-btn>
</v-card-actions>

这不是完整的文件，但包含了我标记的相关部分。

以下是当用户选择复选框和提交按钮时触发的代码：

data() {
return {
tools: [],
filteredTools:[],
mobileFilters:[],
}
}
methods: {
updateFilter: function(filter) {
console.log(filter);
this.$store.commit('populateFilterList',filter);
},
addMobileFilter: function(filter) {
if(this.filteredTools.includes(filter)){
const copy = this.filteredTools;
const index = this.filteredTools.indexOf(filter);
copy.splice(index, 1);
this.filteredTools = copy;
} else {
this.filteredTools.push(filter);
}
},
updateMobileFilter: function(){
this.$store.commit('populateFilterList',this.filteredTools);
this.$emit('dialogStatus',false);
}
}

Answer 1

我认为发生的事情是，在提交时，您将filteredTools绑定到您的商店，然后在以下行中对其进行更改：

this.filteredTools = copy;