How to make v-for :key unique?

问题

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.

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

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.

回答1:

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)
      },
    },
  },
  ...
})

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

来源：https://stackoverflow.com/questions/57499564/how-to-make-v-for-key-unique

标签

javascript

Vue.js

key

uuid

v-for