Updating a filtered multi-row Vuex backed form results in "do not mutate vuex store state" - vuex

Question

I have a multi row form in Nuxt/Vuex that I am successfully CRUDing rows. I can create, updated, and delete rows. Sandbox here.
https://codesandbox.io/s/multirow-fields-hkzql
I have another form where I am filtering the rows based on a value in the row. I can create and delete rows but not update them. Sandbox here.
https://codesandbox.io/s/testing-filtered-multirow-fields-24cxb
When I edit a field in the filtered table I get the [vuex] do not mutate vuex store state outside mutation handlers error.
// store/Table.js snippet
export const getters = {
getField,
filteredRows: state => {
return state.rows.filter(row => row.key > 1);
}
};
<!-- component/MultiRow.vue snippet -->
<tr v-for="row in filteredRows" :key="row.key">
<td>
<input v-model="row.key">
</td>
<td>
<input v-model="row.value">
</td>
<td>
<button class="btn" #click="removeRow(row)">Remove row</button>
</td>
</tr>
Is there a solution in vuex-map-fields? Is there a solution without it?

Answer 1

Your are using Vuex in strict mode, so you cannot update the property of an object from the state outside a mutation, as explained here: https://vuex.vuejs.org/guide/forms.html
To solve your issue, firstcreate a new mutation method:
updateRow(state, row) {
const index = state.rows.findIndex(i => i.key === row.key);
if (index > -1) {
state.rows[index] = row;
}
}
Then replace your v-model by a :value + #inputin order to update the "row" value with this new mutation method:
<tbody>
<tr v-for="row in filteredRows" :key="row.key">
<td>
<input :value="row.key" #input="updateRow(row)">
</td>
<td>
<input :value="row.key" #input="updateRow(row)">
</td>
<td>
<button class="btn" #click="removeRow(row)">Remove row</button>
</td>
</tr>
</tbody>
And update your method list:
methods: {
...mapMutations("Table", ["addRow", "removeRow", "updateRow"])
}