如何使 v-for :key 独一无二？

Question

我遇到数组中的项目不正确 adding/deleting 的问题，我知道这是因为我需要为我的 :key 属性使用一些独特的东西。如果我创建一个 Step 1 和 Step 2，然后我删除 Step 1，然后添加另一个步骤，那么我的应用程序会呈现一个标记为 Step:0 的网格项，然后这两个步骤1和新步骤2同时拖拽

目前我的密钥是 index 用于故障排除，但我希望我的密钥是 step.uuid 我已经添加了一个带有函数 uuidv1() 的库，它生成一个随机的 number/letter 字符串，我希望 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 绑定到 template 中的 step.uuid 值： <grid-item v-for="(step, index) in stepsGrid" :key="step.uuid">.

如何使 v-for :key 独一无二？

How to make v-for :key unique?

javascript

uuid

key

vue.js

v-for