Question

我正在尝试借助v-for和vuex创建动态表单字段。我在另一个v-for中有一个v-for。添加步骤效果很好，但是，当我添加第二个表单字段后默认删除第一个表单字段时，会发生以下情况：{{3}}

这是我正在使用的代码：

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

我尝试使用splice，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

基本上，创建一个唯一的ID，而不是使用v-for中的索引。您可以将此函数添加到根目录的“方法”对象中，并在：key =上调用它，例如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;
      }

v-for的Vue动态表单字段

1 个答案: