javascript - uuid pro v-for klíč s vue-uuid?

Snažím se použít náhodný řetězec (UUID v4) s vue-uuid pro aktuální položky a položky přidané do seznamu v budoucnu (jedná se o aplikaci typu seznam úkolů), ale nejsem si jistý, jaká je správná syntaxe.

Nainstaloval jsem to a přidal do svého projektu v main.js:

import UUID from 'vue-uuid';
Vue.use(UUID);

Nikdyméně nevím, jak to použít ve své komponentě Vue. Toto jsem zkoušel:

Šablona :

<transition-group
  name="list"
  enter-active-class="animated bounceInUp"
  leave-active-class="animated bounceOutDown"
>
  <li v-for="item in skills" :key="uuid">{{ item.skill }}</li>
</transition-group>

Skript :

import { uuid } from 'vue-uuid';

export default {
  name: 'Skills',
  data() {
    return {
      uuid: uuid.v4(),
      skill: '',
      skills: [{ skill: 'Vue.js' }, { skill: 'React' }]
    };
  },
};

Pro :key="uuid" dostávám chybu, která říká Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive (vue/valid-v-for). Zkoušel jsem to také změnit na :key="item.uuid", což tuto chybu odstranilo, ale pak se seznam nezobrazí.

repo projektu (založeno na tomto rychlokurzu Vue z Udemy)

Odpověď č. 1

Zkuste toto:

<template>
  <div id="app">
    <p :key="item.uuid" v-for="item in skills">{{ item.skill }}</p>
  </div>
</template>

<script>
import { uuid } from "vue-uuid";

export default {
  name: "App",
  data() {
    return {
      skills: [
        { uuid: uuid.v4(), skill: "Vue.js" },
        { uuid: uuid.v4(), skill: "React" }
      ]
    };
  }
};
</script>

Toto je funkční demo: https://codesandbox.io/s/nifty-sutherland-b0k9q

AKTUALIZOVÁNO

být dynamický

Existují dva okamžiky, kdy můžete přidat uuid k jednotlivým prvkům v poli dovedností:

1 Při přidávání nové dovednosti:

addSkill() {
  this.$validator.validateAll().then(result => {
    if (result) {
      this.skills.push({ uuid: uuid.v4(), skill: this.skill });
      this.skill = "";
    }
  });
}

2 Při jejich vykreslování byste v tomto případě mohli použít vypočtenou vlastnost takto:

import { uuid } from 'vue-uuid';

export default {
  name: 'Skills',
  data () {
    return {
      skill: '',
      skills: [{ skill: 'Vue.js' }, { skill: 'React' }]
    };
  },
  computed: {
    computedSkills () {
      return this.skills.map(skill => {...skill, uuid: uuid.v4() })
    }
  }
};

A pak použít pro vykreslování výpočetní vlastnost computedSkills místo vlastnosti skills. Něco jako:

<li v-for="item in computedSkills" :key="item.uuid">{{ item.skill }}</li>