Vue.js：为什么我的列表没有使用v-for指令进行渲染？

Question

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

知道为什么列表不会显示吗？

这是我到目前为止的内容：

    <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>

Answer 1

像这样将{{task.complete}}文本放在一行上不是{{task.complete}}有效语法。

您可以将{{task.complete}}与li(v-for="task in tasks")放在同一行。 您可以提供一个元素来容纳task.complete文本（例如span {{task.complete}} ）。 或者，您可以添加一个. 到li行的末尾，以允许您在下一行中提供一段文本。

这是带有这三种解决方案示例的Codepen。