0

我正在学习 Vue.js，但我不知道为什么 <li>{{task.body}}</li>没有显示在屏幕上。

我已经创建了<tasks v-for="task in tasks"></tasks>组件，它需要从父母那里访问数据。

见：https ://jsfiddle.net/pd03t1vm/

HTML：

<div id="app">
    <tasks v-for="task in tasks"></tasks>
</div>

<template id="tasks-template">
    <ul>
      <li>{{task.body}}</li>
    </ul>
</template>

JS：

Vue.component('tasks', {
    template: '#tasks-template',
});

new Vue({
    el: '#app',
    data: {
        tasks: [
            {body: 'Task 1 Something', completed: false},
            {body: 'Task 2 Something', completed: true},
            {body: 'Task 3 Something', completed: false},
            {body: 'Task 4 Something', completed: false}
        ]
    }
});
4

1 回答 1

4

问题是您正在<tasks>从根组件中的数据实例化组件，但您没有将当前任务传递给<tasks>组件，因此它根本无法访问它。

Vue.js 指南解释了如何使用 props 将数据传递到组件中：

首先你需要将电流绑定到组件tasks的prop（这里我称之为item）<task>

<div id="app">
  <tasks v-for="task in tasks" :item="task"></tasks>
</div>

请注意，您使用:属性名称前面的 a 来绑定实际对象。

现在您需要item在组件中定义属性<tasks>：

Vue.component('tasks', {
  props: ['item'],
  template: '#tasks-template',
});

顺便说一句：您的代码创建了<tasks>组件的四个实例，以防万一您想知道 - 这可能不是您期望您的代码完全执行的操作。

于 2016-08-28T22:03:18.933 回答