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.