vue.js 2 список объектов в компоненте

Question

Я очень новичок в фреймворках js frontend, и я пытаюсь изучить некоторые vue.js.

В частности, я пытаюсь сделать массив Note объектов, имеющих id, description и date атрибуты.

Я пытаюсь сделать все это в компоненте :)

Мой 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 код выглядит как: Некоторые замечания:

I запуск на странице загрузки 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]; 
    } 
    } 
});