在网上进行了一些研究之后,我了解我应该将索引添加到循环中,然后将其添加为键。
您如何建议在以下代码中为两个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`"
但是感觉有点奇怪并且容易出错,对吗?
答案 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}`
}
}
})