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を交換する必要があります