为什么我无法解析任务面板子项中 v-for 内的 {{task}} 变量？

Question

for 循环工作正常。当我添加一个新的任务面板时，组件内的 {{task}} 变量没有显示。一定是组件模板的东西。

<span class="col-span-3 bg-blue-200  p-2">{{task}}</span>

我把所有的代码都留在这里了，也许是我没看到的东西。任何的想法？谢谢

<body>

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

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

       app.component(
           'task-input',
           {
               template:
                   `<div class=" container grid grid-cols-4 mb-5 border-2 border-gray-600 center  mt-5 mx-auto bg-gray-400 ">
                        <input id="taskInput"  v-model="task" class="bg-white col-span-3 p-3 text-black font-bold" type="text" placeholder="What you will do next" />
                        <button @click="addTask()"  class="text-white font-extrabold uppercase">Add new task</button>
                    </div>
                    <div class="container container mx-auto rounded-top-lg">
                        <div class=" bg-gray-200 border-2 border-gray-600 center column-1 container mx-auto mt-5 mx-auto rounded-top-lg">
                            <h1 class="font-sans text-2xl text-center text-white bg-gray-500  uppercase font-extrabold px-4 py-4">
                                {{title}}
                            </h1>
                            <ul class="bg-white">
                                 <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 class="grid bg-gray-200 mt-1">
                        <div class="grid grid-cols-4">
                            <span class="col-span-3 bg-blue-200  p-2">{{task}}</span>
                            <span class="col-span-1 text-center self-center uppercase font-bold">test</span>
                        </div>
                        <div class="flex justify-end bg-gray-300 p-1">
                            <button class="bg-blue-500 text-white px-3 py-1 rounded-md m-1 uppercase font-bold">To Do</button>
                            <button class="bg-green-500 text-white px-3 py-1 rounded-md m-1 uppercase font-bold">Done</button>
                            <button class="bg-red-500 text-white px-3 py-1 rounded-md m-1 uppercase font-bold">Blocked</button>
                        </div>
                    </li>
                     `,
           data() {
               return {  }
           },
           props: ['tasks', 'modelValue'],
           computed:{
               tasks:{
                   get(){
                       return this.tasks;
                   }
               }
           }
       });

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

Answer 1

v-for仅在父组件范围内。 v-for 的迭代器属性不会自动传递到 task-panel。

您需要将迭代器属性显式绑定到 task-panel 的属性：

                                     
<task-panel v-for="task in tasks" :task="task" />

此外，task-panel 中的道具应具有相同的名称。它目前拼写为 tasks（末尾有一个 s）。最后一个 s 应该被删除，以便它匹配模板呈现的内容：

// props: ['tasks', ⋯],
props: ['task', ⋯],

<script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script>
<script src="https://cdn.tailwindcss.com"></script>

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

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

   app.component(
       'task-input',
       {
           template:
               `<div class=" container grid grid-cols-4 mb-5 border-2 border-gray-600 center  mt-5 mx-auto bg-gray-400 ">
                    <input id="taskInput"  v-model="task" class="bg-white col-span-3 p-3 text-black font-bold" type="text" placeholder="What you will do next" />
                    <button @click="addTask()"  class="text-white font-extrabold uppercase">Add new task</button>
                </div>
                <div class="container container mx-auto rounded-top-lg">
                    <div class=" bg-gray-200 border-2 border-gray-600 center column-1 container mx-auto mt-5 mx-auto rounded-top-lg">
                        <h1 class="font-sans text-2xl text-center text-white bg-gray-500  uppercase font-extrabold px-4 py-4">
                            {{title}}
                        </h1>
                        <ul class="bg-white">
                             <task-panel v-for="task in tasks" :task="task" />
                        </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 class="grid bg-gray-200 mt-1">
                    <div class="grid grid-cols-4">
                        <span class="col-span-3 bg-blue-200  p-2">{{task}}</span>
                        <span class="col-span-1 text-center self-center uppercase font-bold">test</span>
                    </div>
                    <div class="flex justify-end bg-gray-300 p-1">
                        <button class="bg-blue-500 text-white px-3 py-1 rounded-md m-1 uppercase font-bold">To Do</button>
                        <button class="bg-green-500 text-white px-3 py-1 rounded-md m-1 uppercase font-bold">Done</button>
                        <button class="bg-red-500 text-white px-3 py-1 rounded-md m-1 uppercase font-bold">Blocked</button>
                    </div>
                </li>
                 `,
       data() {
           return {  }
       },
       props: ['task', 'modelValue'],
   });

   app.mount('#app');

</script>

为什么我无法解析任务面板子项中 v-for 内的 {{task}} 变量？

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

vue.js

vuejs3