在 vue v-for 循环中创建唯一键答案

【问题标题】：create unique key in vue v-for loop在 vue v-for 循环中创建唯一键
【发布时间】：2018-12-30 09:44:23
【问题描述】：

在网络上进行了一些研究后，我知道我应该将索引添加到循环中，然后将其添加为键。您如何建议在以下代码中为两个 td 创建唯一键：

      <template v-for="lesson in lessons">
        <td @click="sort(lesson.questions)" :key="lesson.lessonId">
           questions
        </td>
        <td @click="sort(lesson.grade)" :key="lesson.lessonId">
           grade
        </td>
      </template>

我唯一的想法是将索引添加到循环中，然后将第二个索引设置为如下：

:key="`${lesson.lessonId}+1`"

但这感觉有点奇怪且容易出错，对吗？

【问题讨论】：

标签： vue.js

【解决方案1】：

有两种方式，

首先是添加您提到的静态数字：

:key="`${lesson.lessonId}567`"

其次是生成一个新的ID，你将使用uuid版本4包，它会为你生成随机的id，

<template>
 :key="generateID"
</template>


<script>
const uuidv4 = require('uuid/v4');

module.exports = {
  data: function () {
    return {
      generateID: uuidv4();
    }
  }
}
</script>

【讨论】：

【解决方案2】：

特殊属性 'key' 可以是 'numeric' 或 'string'，要解决这个问题你可以在你的课程 ID 前加上一个字符串

  <template v-for="lesson in lessons">
    <td @click="sort(lesson.questions)" :key="`question_${lesson.lessonId}`">
       questions
    </td>
    <td @click="sort(lesson.grade)" :key="`grade_${lesson.lessonId}`">
       grade
    </td>
  </template>`

【讨论】：

【解决方案3】：

<ul id="example-2">
  <li v-for="(item, index) in items" :key="key(index, item)">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  },
  methods: {
    key (index, item) {
        return `${index}${item.message}`
    }
  }
})

【讨论】：