v-for문을 이용한 배열 질문

[전태정]

위  이미지와 같은 표를 작성하기 위해 v-for문을 활용해 코드를 작성했습니다.
작성한 코드의 결과물이 아래와 같이 다르게 표현되어 어떤 부분에서 문제가 발생 한 건 지 궁금합니다.

<template>
 <div>
   <h3>Board</h3>
   <table>
     <thead>
       <th v-for = "item in header" :key ="item">{{item}}</th>
     </thead>
    <tbody>
      <tr v-for = "line in bodylist" :key="line">{{line}}
        <td v-for = " item in line " :key ="item">{{item}}</td>
      </tr>
    </tbody>
   </table>
 </div>
</template>

<script>
export default{
    name: 'App',
    data(){
      return{
        header: ["성", "나이", "키", "몸무게"],
        bodylist: [
         ['Kim',18,180,70],
         ['Lee',19,177,72],
         ['Choi',22,170,68],
         ['Ahn',25,165,60],
         ['Park',19,176,72],
        ]
      }
    }
  }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

[codingapple]

{{line}} 이걸 지워봅시다 

[글쓴이]

글