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

时间:2018-12-30 09:44:23

标签: vue.js

在网上进行了一些研究之后,我了解我应该将索引添加到循环中,然后将其添加为键。 您如何建议在以下代码中为两个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`"

但是感觉有点奇怪并且容易出错,对吗?

3 个答案:

答案 0 :(得分:1)

有2种方法,

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

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

答案 1 :(得分:0)

特殊属性“键” 可以是“数字”或“字符串”,为解决此问题,您可以在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>`

答案 2 :(得分:0)

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