vue.jsコンポーネント内のオブジェクトのリスト

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

私はあなたのコンポーネントでノートを使用しようとしているが、あなたはそのコンポーネントで小道具としてそれを渡されていない、あなたが使用することをいけないnotesListを持って、あなたのコード内の2つのエラー

1. を見ることができますビューで。続き

を必要とされていないあなたは$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]; 
    } 
    } 
});