Question

我遇到了无法正确添加/删除数组项的问题，这是因为我需要为:key属性使用唯一的属性。如果我创建了Step:0和Step 1，然后删除了Step 2，并添加了另一个步骤，那么我的应用程序将使用标记为Step 1的网格项目进行渲染。 1和新步骤2同时拖动。

当前，出于故障排除的目的，我的密钥是index，但是我希望我的密钥是step.uuid，我添加了一个带有函数uuidv1()的库，该函数生成一个随机数字/字母字符串，我希望step.uuid接收这些密钥并将其存储为值，但是由于我是JS菜鸟，因此我不确定如何正确执行此操作。

<grid-layout>
  <grid-item
    v-for="(step, index) in stepsGrid"
    v-bind:index="index"
    v-bind:key="index"
    :x="step.x"
    :y="step.y"
    :w="step.w"
    :h="step.h"
    :i="step.i"
    :uuid="step.uuid"
    :isDraggable="step.isDraggable"
  >
    <div class="Panel__name">
      Step: {{index}}
      <div class="Panel__stepcount">
        Loop Count:
        <input type="number" value="1" />
      </div>
    </div>
    <div class="editButton">
      <router-link to="/Parameters-template" class="editButton">Edit</router-link>
    </div>
    <br />
    <div class="Panel__status">Status:</div>
    <div class="trashcan" @click="removeStep(step)">
      <i class="far fa-trash-alt" style="color:#f6a821;"></i>
    </div>
  </grid-item>
</grid-layout>

export const store = new Vuex.Store({
  // strict: process.env.NODE_ENV !== 'production',
  state: {
    stepsGrid: [{ x: 0, y: 0, w: 2, h: 1, i: 0, uuid: 'xxxx-xxxx-xxxx' }],
    actions: {
      removeElement(step) {
        if (step == this.selectedItem) {
          this.selectElement(null)
        }
      },
      onClickaddStep({ state, commit }) {
        const step = {
          x: 0,
          y: 1,
          w: 2,
          h: 1,
          i: String(state.stepsGrid.length),
        }
        commit('onClickaddStep', step)
      },

      uuidv1() {
        const uuidv1 = require('uuid/v1')
        uuid.v1()
        // console.log(uuid.v1());
      },
    },
  },
})

每次创建新项目时，我都需要uuidv1创建一个新的随机数并将其存储在step.uuid的下一行中。我开始感到沮丧，因为我知道它是如此简单，我似乎找不到合适的方法来解决这个问题。

Answer 1

首先，您应该require uuid位于脚本顶部。然后，应在初始化初始状态时以及每次添加新步骤时调用该函数。看看下面的代码片段：

const uuid = require('uuid/v1')

export const store = new Vuex.Store({
  ...
  state: {
    // // get unique id when init initial state
    stepsGrid: [{ x: 0, y: 0, w: 2, h: 1, i: 0, uuid: uuid() }],
    actions: {
      onClickaddStep({ state, commit }) {
        const step = {
          x: 0,
          y: 1,
          w: 2,
          h: 1,
          i: String(state.stepsGrid.length),
          // get unique id when adding new step
          uuid: uuid()
        }
        commit('onClickaddStep', step)
      },
    },
  },
  ...
})

此后，不要忘记，将:key绑定到您的step.uuid中的template值： <grid-item v-for="(step, index) in stepsGrid" :key="step.uuid">。

如何使v-for：key唯一？

1 个答案: