带有 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"使该错误消失，但是该列表没有出现。

项目存储库（基于此Udemy Vue 速成课程）

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

更新

动态

有两个时刻可以将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。就像是：

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