Question

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

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

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

Answer 2

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

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

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

3 个答案: