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

我在你的代码中看到两个错误

您正在尝试在您的组件中使用 note，但您尚未将其作为 props 传递到该组件中，您有 notesList 未在视图中使用。
您在 $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];
    }
  }
});

vue.js 2 组件中的对象列表

vue.js 2 list of objects in component

vue.js

vue-component