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

我正在尝试将带有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)

最佳答案

试试这个:

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