Question

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

知道列表无法呈现的原因吗？

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

    <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 in tasks")相同的行上。您可以提供一个元素来容纳task.complete文本（例如span {{task.complete}}）。或者，您可以在.行的末尾添加li，以允许您在以下行中提供一个文本块。

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

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

1 个答案: