Vue.js 에서 이중포문을 사용하는 법?

최근 vue.js를 이용해 개발을 할 수 있는 기회가 생겨서 vue.js로 개발을 하고있다,

이전엔 jquery + handlebar.js를 이용해 개발하고 있었는데, 서로 비슷한 부분이 꽤 있어서 적응하는데 많은 어려움을 겪고 있진 않지만 처음사용하는 프레임워크이다보니 생소한 부분이 있어서 정리를 해보고자 한다.

내게서 발생한 문제는 리스트 안에 서브리스트가 존재할 떄 view를 그릴 떄 서브리스트이 값들만큼 td가 생성되어야 하는데 vue.js에서는 어떻게 이중포문을 돌려야 할지 모르겠다는 것이였다. 따라서 리서치를 해본결과 다음과 같았다.

handlebar.js에서 이중포문을 돌릴 땐 이렇게 사용했는데,

{{#each list}}
   {{#each list}}
      	<button>버튼</button>
    {{/each}}
{{/each}}

vue.js는 html안에 v-for을 이용해서 반복문을 순회하다보니 이중포문을 어떻게 돌려야 할지 감이 안왔는데, 찾아보니 vue.js에서는 template라는 것을 지원하고 있었다, 정확히 template가 무엇을 하는건지는 모르겠지만 일단 다음과 같이 사용하면 될 것 같다.

<template v-for='item in list'>
     <tr v-for=item in list.subList>
        <td>생성</td>
     </tr>
</template>  <!-- 이렇게 쓰거나 -->
 
<template v-for='item in list'>
    <template v-for=item in list.subList>
        <tr>
            <td>생성</td>
        </tr>
    </template>     
</template>  <!-- 이렇게 사용하거나 -->
 

비슷한듯 하면서도 다른 handlebar.js와 vue.js .. 좀 더 공부가 필요할 것 같다.