कंसोल चेतावनी: v-for के साथ प्रस्तुत घटक सूचियों में स्पष्ट कुंजी होनी चाहिए

मुझे यहां कोई समस्या है, मुझे नहीं पता कि मेरे कोड में क्या गलत है, लेकिन मुझे अपने कंसोल में एक चेतावनी मिली है, मैं इस चेतावनी को कैसे हटा सकता हूं ?कंसोल चेतावनी: v-for के साथ प्रस्तुत घटक सूचियों में स्पष्ट कुंजी होनी चाहिए

[वू टिप]: <todo-item v-for="todoItem in todos">: वी-फॉर के साथ प्रस्तुत घटक सूचियों में स्पष्ट कुंजी होनी चाहिए। अधिक जानकारी के लिए 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 सुझावहै। मुझे लगता है कि मुझे कोई त्रुटि नहीं है, मैं उस चेतावनी को हल करना चाहता हूं लेकिन मुझे यह नहीं पता कि कारण कहां है, बीटीडब्ल्यू मैं यहां वू के लिए नौसिखिया हूं।

स्रोत

2017-02-27 John Rey M. Baylen

जवाब सरल और documentation you linked में स्पष्ट रूप से सूचीबद्ध है ...

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

स्रोत

2017-02-27 02:42:36 Phil

धन्यवाद, यह :) –

काम कर रहा है मेरे मामले मैं चाहता हूँ पूरे कार्य करने की वस्तु को भेज दिया जा करने के लिए, मुझे नहीं पता केवल .text पास करना चाहते हैं। क्या यह संभव है? – Kokodoko

@kokodoko पूरी वस्तु ** ** ** 'डेटा' संपत्ति के माध्यम से पारित किया गया है। घटक को यह जानने के लिए कि आप अलग-अलग तत्वों की पहचान कैसे करें – Phil

कंसोल चेतावनी: v-for के साथ प्रस्तुत घटक सूचियों में स्पष्ट कुंजी होनी चाहिए

उत्तर

संबंधित मुद्दे