控制台警告:使用v-for呈现的组件列表应具有显式键
Joh*_*len 64 javascript vue.js vuejs2
我在这里遇到了问题,我不知道我的代码有什么问题,但我在控制台中收到警告,如何删除此警告？
[Vue提示] ::
<todo-item v-for="todoItem in todos">使用v-for呈现的组件列表应具有显式键.有关详细信息,请参阅https://vuejs.org/v2/guide/list.html#key.
(找到<Root>)
的index.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>
app.js
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
这是Vue 在这里建议的链接.我想我没有任何错误,我想解决这个警告,但我找不到原因,顺便说一句,我是Vue的新手.
Phi*_*hil 86
<todo-item v-for="todoItem in todos"
v-bind:data="todoItem"
v-bind:key="todoItem.text"></todo-item>
总结以下评论中的一些信息......您可以使用:key该组件了解如何识别单个元素.这使它能够跟踪Vue 反应性的变化.
最好尝试绑定:key每个项目的一些唯一标识属性.例如,一个id.
Hen*_*nry 10
我对类似问题的解决方案如下所示：
- <el-radio v-for="option in field.options"> ...
+ <el-radio v-for="(option, index) in field.options" :key="index"> ...
或使用v-bind语法index：
+ <el-radio v-for="(option, index) in field.options" v-bind:key="index"> ...
- @khan，除非你的“选项”列表是静态的，否则这对于OP的问题来说是一个非常糟糕的解决方案。由于呈现的项目将通过其在列表中的位置来标识，因此对列表进行重新排序的任何内容都存在难以发现错误的风险。 (2认同)