En mi programa, tengo un formulario. Este formulario tiene para este ejemplo dos casillas de verificación y un botón de envío. Cuando hace clic en una casilla de verificación, se guardará en una variable, que se envía a mi tienda vuex, cuando hace clic en el botón. Esta parte funciona muy bien.

También puedo seleccionar y anular la selección de las casillas de verificación tantas veces como quiera, antes de enviar.

Sin embargo, si vuelvo al formulario y hago clic en cualquiera de las casillas de verificación, arroja este error: Error: [vuex] do not mutate vuex store state outside mutation handlers. . Y ahí es donde estoy atascado. Miré a otros que hicieron la misma pregunta, y el consenso general es que estoy usando un v-model o tengo que sacarlo del modo estricto para vuex. No tengo ningún v-models y me gustaría dejarlo en modo estricto.

este es el formulario y el botón enviar.

 <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>

Este no es el archivo completo pero tiene las partes relevantes de mi marcado.

El siguiente es el código, que se activa cuando un usuario selecciona una casilla de verificación y el botón Enviar:

 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); } }