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}}放在與li(v-for="task in tasks")相同的行上。您可以提供一個元素來容納task.complete文本（如span {{task.complete}}）。或者，您可以在li行的末尾添加.以允許您在以下行中提供一段文本。

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