Ostrzeżenie konsoli: listy komponentów renderowane za pomocą v-for powinny mieć jawne klucze

Mam problem tutaj, nie wiem, co jest nie tak w moim kodzie, ale mam ostrzeżenie w mojej konsoli, jak mogę usunąć to ostrzeżenie ?Ostrzeżenie konsoli: listy komponentów renderowane za pomocą v-for powinny mieć jawne klucze

[Wskazówka Vue]: <todo-item v-for="todoItem in todos">: listy elementów zrenderowane za pomocą v-for powinny mieć jawne klucze. Aby uzyskać więcej informacji, patrz https://vuejs.org/v2/guide/list.html#key.
(znaleziono w <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

Oto link, który zasugerowałVue. Myślę, że nie mam żadnego błędu, chcę rozwiązać to ostrzeżenie, ale nie mogę ustalić, gdzie jest przyczyna, przy okazji jestem początkującym tutaj dla Vue.

Źródło

2017-02-27 John Rey M. Baylen

Odpowiedź jest prosta i wyraźnie wymienione w documentation you linked ...

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

Źródło

2017-02-27 02:42:36 Phil

Dzięki, że to działa :) –

W moim przypadku chcę cały obiekt todo zostać przekazane do , nie wiem chcesz przekazać tylko .text. czy to możliwe? – Kokodoko

@kokodoko cała pozycja ** jest ** przekazywana za pośrednictwem właściwości 'data'. Używasz 'klucza', aby komponent wiedział jak identyfikować poszczególne elementy – Phil

Ostrzeżenie konsoli: listy komponentów renderowane za pomocą v-for powinny mieć jawne klucze

Odpowiedz

Powiązane problemy