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.