[Vue] - v-for문 에러

Vue의 디렉티브인 v-for을 이용해서 배열에 선언 된 객체들을 하나씩 뿌려주는 연습을 하고 있는데

리스트가 표출되지 않아

콘솔창에 찍어보니 다음과 같은 에러가 났다.

[Vue warn] 로그

 구글링을 해보니 v-for문은 여러요소를 제공하는 루프이기 때문에 root요소와 함께 사용할 수 없다는 듯 하다.

여기서 root요소는 id값인 것 같다..

 

<변경전>

기존 소스 : id값과 v-for문을 같은 <tr>태그에 정의

<변경후>

id값과 v-for문을 다른 태그에 선언

id값을 상위 태그에 두고, v-for을 하위 태그에 선언 해주니 잘 출력 된다.

 

배열 출력 모습

-----------------------------------------------------------------------------------------------------------------------------------

 

v-for을 이용해 배열을 출력하는 도중 또 에러가 났다...

위와 같은 배열과 <div>태그에 id값을 선언한 뒤 출력해보았는데 아래와 같은 에러가 났다.

<table> 태그 추가

소스를 다시 한번 읽어보니 <table> 태그를 넣어주지 않아 발생했던 에러였다..... 멍청