Vue.js：为什么我的列表没有使用 v-for 指令呈现？

【问题标题】：Vue.js: Why isn't my list isn't rendering with v-for directive?Vue.js：为什么我的列表没有使用 v-for 指令呈现？
【发布时间】：2018-03-02 21:19:56
【问题描述】：

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

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

这是我目前所拥有的：

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

【问题讨论】：

标签： javascript list for-loop vue.js pug

【解决方案1】：

像这样将{{task.complete}} 文本放在自己的一行上在 pug 中是无效的语法。

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

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

【讨论】：