javascript - vue-uuid 的 v-for 键的 uuid？

Question

我正在尝试使用带有 vue-uuid 的随机字符串 (UUID v4)对于当前项目和将来添加到列表中的项目(这是一个待办事项列表类型的应用程序)，但我不确定正确的语法是什么。

我安装了它并将它添加到我的 main.js 项目中:

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

但是，我不知道如何在我的 Vue 组件中使用它。这是我尝试过的:

模板:

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

脚本:

import { uuid } from 'vue-uuid';

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

对于 :key="uuid" ，我收到一条错误消息 Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive (vue/valid-v-for) .我也试过把它改成 :key="item.uuid"这使得该错误消失，但随后列表不会出现。

project repo (基于此 Udemy Vue crash course )

Answer 1

尝试这个:

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

这是一个工作演示: https://codesandbox.io/s/nifty-sutherland-b0k9q

更新

to be dynamic

有两个时刻可以添加 uuid技能数组中的每个元素:

1 添加新技能时:

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

2 在呈现它们时，在这种情况下，您可能会使用这样的计算属性:

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

然后使用 computedSkills用于渲染的计算属性，而不是 skills属性(property)。就像是:

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