Question

我正在学习Vue.js，我无法弄清楚为什么<li>{{task.body}}</li>没有在屏幕上显示。

我创建了<tasks v-for="task in tasks"></tasks>组件，需要访问父母的数据。

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}
        ]
    }
});

Answer 1

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

The Vue.js guide explains how to pass the data into a component using props：

首先，您需要将当前tasks绑定到item组件的道具（此处称为<task>）

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

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

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

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

顺便说一句：您的代码会创建<tasks>组件的四个实例，以防万一您想知道 - 这可能与您对代码的预期完全不同。

组件 - 从父级获取数据？

1 个答案: