コンポーネント - 親からデータを取得していますか？

Question

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

Answer 1

問題は、あなたがルートコンポーネントのデータから<tasks>コンポーネントをインスタンス化しているということですが、あなたはありません現在のタスクを<tasks>コンポーネントに渡すので、まったくアクセスできません。

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> 

注プロパティ名の前に

今、あなたは<tasks>コンポーネントでitemプロパティを定義する必要があります：ところで

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

を：あなたのコードは<tasks>コンポーネントの4つのインスタンスを作成し、あなたが思っていただけの場合には - これはではないかもしれませんあなたのコードが正確に行うことを期待したもの。