vue-uuid 的 v-for 键的 uuid？

Posted 2023-02-23

【中文标题】vue-uuid 的 v-for 键的 uuid？

【英文标题】：uuid for v-for key with vue-uuid?

【发布时间】：2020-05-04 21:58:56

【问题描述】：

我正在尝试使用带有 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）

【问题讨论】：

检查this

这不是一个好习惯，但如果数组没有唯一值可用作键，那么您可以使用index。例如，<li v-for="(item,index) in skills" :key="index">

我的代码原本就是这样，但我想使用唯一的 ID。

【参考方案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>

【讨论】：

这适用于现有项目，但这是一个待办事项列表类型的应用程序，我无法通过这种方式将关键项目添加到列表中。

@Natalie 你是什么意思？您绝对可以在创建新项目时使用 uuid.v4() 来设置此 uuid 属性，以便它在 v-for 中可用。您可能需要提出问题以包括如何添加新项目。

是的，我不知道如何处理新项目。在最初的问题中，我试图从 :key="" 中调用 UUID 以使其成为动态的。更新了问题。