web-dev-qa-db-fra.com

Avertissement de la console: les listes de composants rendues avec v-for doivent avoir des clés explicites

J'ai un problème ici, je ne sais pas ce qui ne va pas dans mon code, mais j'ai un avertissement dans ma console, comment puis-je supprimer cet avertissement?

[Astuce de vue]: <todo-item v-for="todoItem in todos">: les listes de composants rendues avec v-for doivent avoir des clés explicites. Voir https://vuejs.org/v2/guide/list.html#key pour plus d'informations.
(trouvé dans <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

enter image description here

Voici le lien que Vue a suggéré ici . Je pense que je n'ai aucune erreur, je veux résoudre cet avertissement, mais je ne peux pas trouver où est la cause, mais je suis novice ici pour Vue.

javascriptvue.jsvuejs2
61
John Rey M. Baylen

La réponse est explicitement listée dans le documentation que vous avez liée ...

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

Pour résumer certaines informations des commentaires ci-dessous ... vous utilisez :key pour indiquer au composant comment identifier des éléments individuels. Cela lui permet de suivre les modifications de la réactivité de Vue .

Il est préférable d'essayer de lier le :key à une propriété d'identification unique de chaque élément. Par exemple, un id.

84
Phil

Ma solution à un problème similaire ressemblait à ceci:

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

Ou en utilisant la syntaxe v-bind pour index:

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

Vous pouvez utiliser n'importe quel champ de vos données comme clé. De plus, vous pouvez utiliser l'identifiant par défaut. De plus, vous pouvez définir une "clé" dans vos données comme dans le code ci-dessous:

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

À la place de la clé dans le fichier task.key, vous pouvez mettre l'un des noms de champs, y compris l'identifiant masqué.

0
Ioannis Chrysochos