Vue.js 在vue v-for循环中创建唯一密钥

在网上进行了一些研究之后，我明白我应该向循环中添加索引，然后将其作为键添加。 您建议如何在以下代码中为

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}567`"

第二个是生成一个新ID，您将使用版本4包，该包将为您生成随机

ID

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


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

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

：key=“generateID”
const uuidv4=require（'uuid/v4'）；
module.exports={
数据：函数（）{
返回{
generateID:uuidv4（）；
}
}
}

特殊属性'key'可以是'numeric'或'string'，要解决这个问题，您可以在lessonId前面加一个字符串

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

问题
等级
`

{{parentMessage}}-{index}-{{item.message}}


var example2=新的Vue({
el:“#示例2”，
数据：{
parentMessage:'父'，
项目：[
{消息：'Foo'}，
{消息：'Bar'}
]
},
方法：{
键（索引，项）{
返回`${index}${item.message}`
}
}
})

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

<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}`
    }
  }
})