vue.js 2組件中的對象列表

Question

我對js前端框架非常陌生，我正在嘗試學習一些vue.js。

特別是我試圖渲染一個具有id,description和date屬性的Note對象的數組。

我試圖做到這一切在組件:)

我ul元素看起來像

<ul class="list-group"> 
    <li 
    is="note-item" 
    v-for="note in notesList" 
    v-bind:title="note.description" 
    :key="note.id" 
    ></li> 
</ul> 

而且我Vue的代碼如下所示： 一些注意事項：

我在頁面加載vue.updateNoteList上運行，其調用vue.loadFirstNote。

Vue.component('note-item', { 
    template: '\ 
    <li>\ 
     {{ note.description }}\ 
     <button v-on:click="$emit(\'remove\')">X</button>\ 
    </li>\ 
    ', 
    props: ['notesList'] 
}); 

const vm = new Vue({ 
    el: '#main-content', 
    data: { 
    input: '', 
    notesList: [{ }] 
    }, 

    methods: { 
    updateNoteList: function (callback) { 
     const that = this; 
     Note.all((notes) => { 
     that.notesList = notes; 
     return callback(); 
     }); 
    }, 

    loadFirstNote: function() { 
     if (this.notesList.length > 0) { 
     this.note = this.notesList[0]; 
    } 
    } 
}); 

我一直試圖讓這個工作了一整天，而且我越來越行不通。我收到以下控制檯錯誤。任何幫助，將不勝感激。

vue.common.js?e881:519 [Vue warn]: Property or method "note" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
vue.common.js?e881:519 [Vue warn]: Error when rendering component <note-item>: 
vue.common.js?e881:2961 Uncaught TypeError: Cannot read property 'description' of undefined 

Answer 1

我可以看到在你的代碼

1. 你想在你的組件使用的筆記，但是你有沒有通過它在該組件的道具兩個錯誤，你有notesList，你不使用在視圖中。
2. 你有$emit使用\，不要求

以下是這些修補程序：

HTML：

<ul class="list-group"> 
    <li 
    is="note-item" 
    v-for="note in notesList" 
    v-bind:title="note.description" 
    :key="note.id" 
    :note="note" 
    ></li> 
</ul> 

JS：

Vue.component('note-item', { 
    template: '\ 
    <li>\ 
     {{ note.description }}\ 
     <button v-on:click="$emit('remove')">X</button>\ 
    </li>\ 
    ', 
    props: ['note'] 
}); 

const vm = new Vue({ 
    el: '#main-content', 
    data: { 
    input: '', 
    notesList: [{ }] 
    }, 

    methods: { 
    updateNoteList: function (callback) { 
     const that = this; 
     Note.all((notes) => { 
     that.notesList = notes; 
     return callback(); 
     }); 
    }, 

    loadFirstNote: function() { 
     if (this.notesList.length > 0) { 
     this.note = this.notesList[0]; 
    } 
    } 
});