Why I cant parse the {{task}} variable inside the v-for in the task-panel child?-CodePudding

The for loop is working properly. When I add a new task panel shows but the {{task}} variable inside the component is not showing. It must be something with the component template.

<span >{{task}}</span>

I have left all the code down here maybe is something that I don't see. Any idea? Thanks

<body>

    <div id="app">
        <task-input></task-input>
    </div>

    <script>
       let app =  Vue.createApp({  });

       app.component(
           'task-input',
           {
               template:
                   `<div >
                        <input id="taskInput"  v-model="task"  type="text" placeholder="What you will do next" />
                        <button @click="addTask()"  >Add new task</button>
                    </div>
                    <div >
                        <div >
                            <h1 >
                                {{title}}
                            </h1>
                            <ul >
                                 <task-panel v-for="task in tasks"/>
                            </ul>
                         </div>
                    </div>`,
                   data() {
                       return {
                           title:"Here is a nice title",
                           task: '',
                           tasks: [],
                       }
                },
               components:['task-panel'],
               methods:{
                   addTask(){
                       this.tasks.push(this.task);
                       this.task='';
                       console.log(this.tasks);
                   }
               }
           },
       );

       app.component('task-panel',{
           template:
                    `<li >
                        <div >
                            <span >{{task}}</span>
                            <span >test</span>
                        </div>
                        <div >
                            <button >To Do</button>
                            <button >Done</button>
                            <button >Blocked</button>
                        </div>
                    </li>
                     `,
           data() {
               return {  }
           },
           props: ['tasks', 'modelValue'],
           computed:{
               tasks:{
                   get(){
                       return this.tasks;
                   }
               }
           }
       });

       app.mount('#app');
   
    </script>
</body>

CodePudding user response：

The v-for is only in the scope of the parent component. The v-for's iterator prop does not get automatically passed into the task-panel.

You need to explicitly bind the iterator prop to task-panel's prop: