구성 요소 - 부모로부터 데이터 가져 오기?

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 :

먼저 당신은 당신이 :를 사용하여 실제 개체를 결합하는 <task> 구성 요소의 소품 (여기에 내가 item라고 불렀다)

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

참고로 현재 tasks을 바인드해야 속성 이름 앞에. 이되지 않을 수도 있습니다 - 당신이 궁금해하는 경우를 대비하여, 자신의 코드는 <tasks> 구성 요소의 네 개의 인스턴스를 생성 : 그런데

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

가 :

은 이제 <tasks> 구성 요소에 item 속성을 정의해야 코드가 정확히 무엇을 기대했는지.