Javascript Vue.js：为什么不是'；我的名单不是'；使用v-for指令进行t渲染？

我试图呈现存储在同一组件中的数据中的列表。控制台一直告诉我“模块构建失败”

知道为什么列表不会呈现吗

这就是我到目前为止所做的：

    <template lang="pug">

    .work
        .work__top
            .content
                h1 Work To-Do List
                p.date Monday, 19th September
        .work__search
            search
        .work__taskList
            ul
                li(v-for="task in tasks")
                    {{task.complete}}

</template>

<script>

    import Search from './components/Search.vue'

    export default {
        components: {
            'search': Search,
        },
      data() {
            return {
                tasks: [
                    {complete: false, label: 'Finish report'}
                ]
            }
      },
    }

</script>

工作
.工作
.内容
h1待办事项清单
p、 日期：9月19日星期一
.工作搜索
搜索
.工作任务列表
保险商实验室
li（v-for=“任务中的任务”）
{{task.complete}
从“./components/Search.vue”导入搜索
导出默认值{
组成部分：{
“搜索”：搜索，
},
数据（）{
返回{
任务：[
{complete:false，标签：'Finish report'}
]
}
},
}

将

{{{task.complete}}

文本放在它自己的一行上，这在帕格语中是无效的语法

您可以将

{{task.complete}}

与

li（v-for=“task in tasks”）

放在同一行。您可以提供一个元素来存放

task.complete

文本（比如

span{{task.complete}}

）。或者，您可以在

li

行的末尾添加

，以便在下一行中提供一块文本

---

将

{{{task.complete}}

文本放在它自己的一行上，这在帕格语中是无效的语法

您可以将

{{task.complete}}

与

li（v-for=“task in tasks”）

放在同一行。您可以提供一个元素来存放

task.complete

文本（比如

span{{task.complete}}

）。或者，您可以在

li

行的末尾添加

，以便在下一行中提供一块文本