javascript - number - v repeat
Advertencia de consola: las listas de componentes representadas con v-for deben tener claves explícitas (3)
Tengo un problema aquí, no sé qué está mal en mi código, pero recibí una advertencia en mi consola, ¿cómo puedo eliminar esta advertencia?
[Consejo de Vue]:
<todo-item v-for="todoItem in todos">: las listas de componentes representadas con v-for deben tener claves explícitas. Consulte https://vuejs.org/v2/guide/list.html#key para obtener más información.
(encontrado en<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
Aquí está el enlace que Vue sugirió here . Creo que no tengo ningún error, quiero resolver esa advertencia, pero no puedo encontrar la causa, por cierto, soy novato en Vue.
La respuesta se enumera explícitamente en la https://vuejs.org/v2/guide/list.html#key ...
<todo-item v-for="todoItem in todos"
v-bind:data="todoItem"
v-bind:key="todoItem.text"></todo-item>
Para resumir alguna información de los comentarios a continuación ... utiliza
:key
para que el componente sepa cómo identificar elementos individuales.
Esto le permite realizar un seguimiento de los cambios para la
reactividad
de Vue.
Es mejor tratar de vincular la
:key
a alguna propiedad de identificación única de cada elemento.
Por ejemplo, una
id
.
Mi solución a un problema similar se veía así:
- <el-radio v-for="option in field.options"> ...
+ <el-radio v-for="(option, index) in field.options" :key="index"> ...
O usando la sintaxis de
v-bind
para el
index
:
+ <el-radio v-for="(option, index) in field.options" v-bind:key="index"> ...
Puede usar cualquier campo de sus datos como clave. Además, puede usar la identificación predeterminada. Además, puede definir una "clave" en sus datos como en el siguiente código:
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>`
});
En lugar de la clave en task.key, puede poner uno de los nombres de campo, incluida la identificación oculta.