时间戳

首页 > 解决方案 > 带有 v-for 的 Vue 动态表单字段

javascript - 带有 v-for 的 Vue 动态表单字段

问题描述

我正在尝试在 v-for 和 vuex 的帮助下创建动态表单字段。我在另一个 v-for 中有一个 v-for。添加步骤效果很好，但是，当我在添加第二个表单字段后删除默认存在的第一个表单字段时，会发生这种情况：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);
    }

我尝试过使用 splice、Vue.delete、filter 和 shift，都导致相同的结果。如果有人可以帮助我，我将不胜感激

标签： javascriptvue.jsvuex

解决方案

在这里找到答案：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;
      }

推荐阅读