javascript - 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}} 文本单独放在一行上，这在 pug 中是无效语法。

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

Here's a codepen with examples of those three solutions.