Компонент - получение данных от родителя?

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> 

Заметим, что вы связать реальный объект, используя : перед именем свойства.

Теперь вам нужно определить item свойство в <tasks> компонента:

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

Кстати: Ваш код создает четыре экземпляра <tasks> компонента, только в случае, если вам интересно, - это не может быть что вы ожидали от своего кода.