列表项未在Vue.js的组件概念中使用组件显示

我的代码不起作用。我想在列表中打印任务，但现在没有显示列表项。 我想这样展示 我想要组件概念中的组件

HTML:

组件中的Vue组件

JS（Vue.JS）：

Vue.component（'task-list'{
模板：
'
{{task.task}
',
数据（）{
返回{
任务：[
{任务：'去美国'，完成：正确}，
{任务：'去喀拉拉邦'，完成：正确}，
{任务：“前往泰米尔纳德邦”，完成：false}，
{任务：'转到Simla'，完成：true}
]
};
}
});
Vue.component（'任务'{
模板：“
”
});
新Vue({
el:“#儿童任务”
});

您可以通过将

任务作为道具从
任务组件
发送并呈现任务道具来实现。希望这会有帮助

Vue.component（'task-list'{
模板：
'
',
数据（）{
返回{
任务：[
{任务：'去美国'，完成：正确}，
{任务：'去喀拉拉邦'，完成：正确}，
{任务：“前往泰米尔纳德邦”，完成：false}，
{任务：'转到Simla'，完成：true}
]
};
}
});
组件（'task'，{
道具：[“任务”]，
模板：'
{{task.task}}
'
});
新Vue({
el:“#儿童任务”
});
您可以这样完成：

组件结构：

Vue.component('task-list', {
    template: 
        `<div>
            <li v-for="task in tasks">{{ task.task }}</li>
        </div>`,
    data(){
        return {
            tasks: [
                {task: 'Go to the United States', complete: true},
                {task: 'Go to Kerala', complete: true},
                {task: 'Go to Tamil Nadu', complete: false},
                {task: 'Go to Simla', complete: true}
            ]
        };
    }
});

new Vue({
    el: '#childtasks',
});


<div id="childtasks">
  <task-list></task-list>
</div>

Vue.component（'task-list'{
模板：
`
{{task.task}
`,
数据（）{
返回{
任务：[
{任务：'去美国'，完成：正确}，
{任务：'去喀拉拉邦'，完成：正确}，
{任务：“前往泰米尔纳德邦”，完成：false}，
{任务：'转到Simla'，完成：true}
]
};
}
});
新Vue({
el:“#儿童任务”，
});

调用组件：

Vue.component('task-list', {
    template: 
        `<div>
            <li v-for="task in tasks">{{ task.task }}</li>
        </div>`,
    data(){
        return {
            tasks: [
                {task: 'Go to the United States', complete: true},
                {task: 'Go to Kerala', complete: true},
                {task: 'Go to Tamil Nadu', complete: false},
                {task: 'Go to Simla', complete: true}
            ]
        };
    }
});

new Vue({
    el: '#childtasks',
});


<div id="childtasks">
  <task-list></task-list>
</div>



检查此
它按预期工作。检查这里谢谢@Lucifer，现在代码运行良好！