如何使v-for:key唯一? [英] How to make v-for :key unique?

问题描述

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

I am having issues with items not properly adding/deleting from array, and I know it is because I need to be using something unique for my :key property. My app renders with a grid-item labeled Step:0, if I create a Step 1 and Step 2, and then I delete Step 1, and add another step, then both the step 1 and new step 2 drag with each other at the same time.

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

Currently my key is index for troubleshooting purposes, but I want my key to be step.uuid I have added a library with the function uuidv1() which generates a random number/letter string, I want step.uuid to receive these keys and store them as the value, but I am not sure how to do this properly as I am a JS noob.

<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的下一行中.我开始感到沮丧，因为我知道这很简单，我似乎找不到合适的方法来解决这个问题.

Every time I create a new item, I need the uuidv1 to create a new random number and store it in the next row for step.uuid. I am beginning to frustrate myself, because I know how simple it is, I just can't seem to find the proper way to handle this.

推荐答案

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

First off you should require uuid at the top of the script. Then you should invoke that function when you init your initial state and every time when you add new step. Take a look at this code snippet:

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">.

After that don't forget to bind :key to step.uuid value in your template: <grid-item v-for="(step, index) in stepsGrid" :key="step.uuid">.

这篇关于如何使v-for:key唯一?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！