I'm currently experimenting with creating dynamic form fields using v-for and vuex. My approach involves nesting a v-for inside another v-for. The process of adding new form fields works smoothly, but I encountered an issue when attempting to delete the default first form field after adding a second one. You can see the problem in action here: https://youtu.be/a5b0KaITPTo
Below is the code snippet I am working with:
Vuex action (the payload contains indices for the v-for loops):
removeMaterialAction({ commit }, payload) {
console.log(payload.materialIndex);
commit("REMOVE_MATERIAL", payload);
},
Vuex mutation:
REMOVE_MATERIAL(state, payload) {
state.workOrder.tasks[payload.taskIndex].materials.splice(
payload.materialIndex,
1
);
//Vue.delete(state.workOrder.tasks[taskIndex].materials, index);
}
I have experimented with different methods like splice, Vue.delete, filter, and shift, but they all resulted in the same issue. If you have any suggestions or solutions, I would greatly appreciate your help.