控制台警告: 用 v-for 呈现的组件列表应该有显式键

我遇到了一个问题，我不知道我的代码出了什么问题，但是我的控制台中出现了一个警告，我怎样才能删除这个警告呢？

[ Vue 技巧] : <todo-item v-for="todoItem in todos">: 使用 v-for 呈现的组件列表应该有明确的键。更多信息请参见 https://v2.vuejs.org/v2/guide/list.html#key。
(见 <Root>)

Html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Tutorial</title>
<link rel="shortcut icon" href="https://vuejs.org/images/logo.png">
<script src="scripts/vue.js"></script>
</head>
<body>
<section id="app">
<p>{{ msg }}</p>
<p v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</p>
<div>
<p v-if="seen">This text will show or hide if the button was clicked.</p>
<button type="button" v-on:click="isSeen">{{ isSeenText }}</button>
</div>
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
<p>Total count: {{ todos.length }}</p>
<div v-bind:title="reverseMessageText">
<p>{{ reverseMessageText }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<div>
<p>Data binding: <strong>{{ nameOfUser }}</strong></p>
<input type="text" v-model="nameOfUser">
</div>
<div>
<ol>
<todo-item v-for="todoItem in todos" v-bind:data="todoItem"></todo-item>
</ol>
</div>
</section>
<script src="scripts/app.js"></script>
</body>
</html>

应用程序

var appComponent = Vue.component('todo-item', {
template: '<li>id: {{ data.id }}<br>text: {{ data.text }}</li>',
props: [
'data'
]
});


new Vue({
el: '#app',
data: {
msg: 'Hello World!',
message: 'You loaded this page on ' + new Date(),
seen: true,
isSeenText: 'Now you don\'t',
todos: [
{
text: 'Learn JavaScript'
},
{
text: 'Learn Vue'
},
{
text: 'Build something awesome'
}
],
reverseMessageText: 'Hello World from Vue.js!',
nameOfUser: 'John Rey'
},
methods: {
reverseMessage: function() {
this.reverseMessageText = this.reverseMessageText.split('').reverse().join('');
},
isSeen: function() {
this.seen = !this.seen;
this.isSeenText = this.seen ? 'Now you don\'t' : 'Now you see me';
}
}
});




console.log

enter image description here

下面是 Vue 建议使用 给你的链接。我想我没有任何错误，我想解决这个警告，但我不能找到原因，顺便说一下，我是新来的 Vue。

51675 次浏览
小开
最佳答案

答案在 你链接的文件中明确列出..。

<todo-item v-for="todoItem in todos"
v-bind:data="todoItem"
v-bind:key="todoItem.text"></todo-item>

为了总结以下注释中的一些信息... ... 您可以使用 :key让组件知道如何识别单个元素。这允许它跟踪 Vue 的 反应的变化。

最好尝试将 :key绑定到每个项目的某个唯一标识属性。

小开

我对一个类似问题的解决方案是这样的:

- <el-radio v-for="option in field.options"> ...
+ <el-radio v-for="(option, index) in field.options" :key="index"> ...

或者对 index使用 v-bind语法:

+ <el-radio v-for="(option, index) in field.options" v-bind:key="index"> ...
小开

您可以使用数据的任何字段作为键。此外，还可以使用默认的 id。此外，你可以在你的数据中定义一个“键”，如下面的代码所示:

Vue.component('task-list', {
template:  `
<div><slot>
<task v-for="task in tasks" :key="task.key">  \{\{task.description}}</task>
</slot></div>
`,
data () {
return {
tasks: [
{description:"Go to market", completed:false, key:"asd"},
{description:"Wake up ", completed:true, key:"rty"},
{description:"Sleep", completed:false, key:"terw"},
{description:"Have breakfast", completed:true, key:"jdr"},
]
};
},
});
Vue.component('task', {
template: `<li><slot></slot></li>`
});

在 task.key 中的键的位置，您可以放置一个字段名，包括隐藏的 id。


提交答案