Konsol uyarısı: v-for ile oluşturulan bileşen listeleri açık anahtar koduna sahip olmalıdır

Burada bir sorun var, kodumda yanlış olanı bilmiyorum, ancak konsolumda bir uyarı var, bu uyarıyı nasıl kaldırabilirim ?Konsol uyarısı: v-for ile oluşturulan bileşen listeleri açık anahtar koduna sahip olmalıdır

[Vue ipucu]: <todo-item v-for="todoItem in todos">: v-for ile oluşturulan bileşen listeleri açık anahtarlara sahip olmalıdır. Daha fazla bilgi için https://vuejs.org/v2/guide/list.html#key'a bakın.

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

İşte

Vueönerdi link (<Root> bulunur)
. Sanırım hiç bir hatam yok, bu uyarıyı çözmek istiyorum ama nedeninin nerede olduğunu bulamıyorum, btw burada Vue'ya yeni geliyorum.

kaynak

2017-02-27 John Rey M. Baylen

cevap

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

kaynak

2017-02-27 02:42:36 Phil

sayesinde, ben tüm todo nesne iletilecek istiyorum Benim durumumda :) –

çalışıyor, bilmiyorum ... basit ve documentation you linked açıkça listelenmiş olan sadece .text iletmek istiyorum. Mümkün mü? – Kokodoko

@kokodoko'nun bütün maddesi **, ** 'data' özelliği üzerinden geçirilir. Bileşen – Phil

Konsol uyarısı: v-for ile oluşturulan bileşen listeleri açık anahtar koduna sahip olmalıdır

cevap

İlgili konular