Vue Dynami c Поля формы с v-for

Question

Я пытаюсь создать динамические c поля формы с помощью v-for и vuex. У меня есть V-для другого V-для. Шаг добавления работает хорошо, однако, когда я удаляю первое поле формы, которое там по умолчанию, после добавления второго, это происходит: https://youtu.be/a5b0KaITPTo

Это код, который я использую для этого:

Действие Vuex (полезная нагрузка - это объект, который содержит два индекса из v-for, который я использую):

removeMaterialAction({ commit }, payload) {
      console.log(payload.materialIndex);
      commit("REMOVE_MATERIAL", payload);
    },

Мутация Vuex:

REMOVE_MATERIAL(state, payload) {     

state.workOrder.tasks[payload.taskIndex].materials.splice(
        payload.materialIndex,
        1
      );
      //Vue.delete(state.workOrder.tasks[taskIndex].materials, index);
    }

Я попытался использовать сплайс, Vue .delete, filter и shift и все привело к одному и тому же результату. Если кто-нибудь может помочь мне, я буду очень признателен

Answer 1

Нашел ответ здесь: https://forum.vuejs.org/t/array-index-as-v-for-key-results-in-problems-when-removing-items-from-the-list/4982/10

По сути, создайте уникальный идентификатор вместо использования индекса из v-for. Вы можете добавить эту функцию к вашему root объекту "методы" и вызывать ее: key = like uuid(object):

     uuid(e) {
        if (e.uid) return e.uid;

        const key = Math.random()
          .toString(16)
          .slice(2);

        this.$set(e, "uid", key);

        return e.uid;
      }