Vue - 하위 구성 요소에 속성 (개체)이 정의되어 있지 않습니다.

Question

오류 : [Vue warn]: Error in render: "ReferenceError: task is not defined". ->{{ task.title }}이 표시됩니다. 나는 그게 무슨 뜻인지 이해하지만 왜 그 이유를 이해할 수는 없다. 많은 예제를 살펴 보았고 주요 포인트를 이해하는 방법은 부모 컴포넌트의 속성 (예 : v-bind:some_prop 또는 :some_prop)과 자식 컴포넌트 정의 prop: ['some_prop']을 전달하는 것입니다. 어쩌면 js 객체를 전달할 수 없지만, 다음과 같이 전달하는 예제를 보았습니다 : :some_prop="{['first', 'second']}. 그 물체는 지나칠 수 있지만, 어떻게 될까요?

Tasks.vue :

<template> 
    <div> 
     <div id="tasks_wrapper"> 
      <div id="elements_wrapper"> 
       <div class="title">Tasks for today</div> 
       <hr class="delimiter" /> 
       <ul id="tasks_list"> 
        <task v-for="(task, index) in tasks_list" v-bind:task="task" v-bind:key="index"></task> 
       </ul> 
      </div> 
     </div> 
    </div> 
</template> 

<script> 
    import Task from './Task.vue'; 

    export default { 

     components: { 
      Task 
     }, 
     data() { 
      return { 
       tasks_list: [] 
      } 
     }, 
     created() { 
      this.tasks(); 
      setInterval(this.tasks, 300000); 
     }, 
     methods: { 
      tasks() { 
       let that = this; 
       axios.get('http://localhost/tasks') 
        .then(function (response) { 
         that.tasks_list = response.data; 
        }) 
        .catch(function (error) { 
         console.log('Error! Could not reach the API. ' + error); 
        }); 
      } 
     }, 
    }; 
</script> 

Task.vue는 :

<template> 
    <li> 
     <div class="title" :style="style">{{ task.title }}</div> 
    </li> 
</template> 

<script> 

    export default { 
     props: ['task'], 

     data() { 
      return { 
       completed: false 
      } 
     }, 
     computed: { 
      style: function() { 
       if (task.status === 'completed') { 
        this.completed = true; 
       } 
      } 
     } 
    }; 

</script> 

Answer 1

사용이 this.task.status 대신 & task.status의 당신은 당신의 Task.vue

export default { 
     props: ['task'], 

     data() { 
      return { 
       completed: false 
      } 
     }, 
     computed: { 
      style: function() { 
       if (this.task.status === 'completed') { 
        this.completed = true; 
       } 
      } 
     } 
    } 

내부에 아래와 같은 props에 prop를 교체해야