Within my program, I have designed a form that consists of two checkboxes and a submit button for demonstration purposes. Upon clicking a checkbox, the selection is saved to a variable, which is then pushed to the vuex store when the submit button is clicked. This functionality works smoothly.
I have the flexibility to toggle the checkboxes on and off multiple times before finalizing my selections by hitting the submit button.
However, when I revisit the form and attempt to click on either checkbox, an error is triggered:
Error: [vuex] do not mutate vuex store state outside mutation handlers.v-model or the necessity to disable strict mode for vuex. I can confirm that I am not utilizing any v-models and prefer to maintain strict mode.
Below is a snippet of the form structure and submit button:
<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>
This excerpt does not cover the entirety of the file, but it encapsulates the key elements of my markup.
Here is the code snippet that is executed when a user interacts with a checkbox and subsequently clicks the submit button:
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);
}
}