Vue

by cedric_tarou

HTML

<div id="app">
  <table>
    <!-- テーブルヘッダー -->
    <thead>
      <tr>
        <th class="id">ID</th>
        <th class="comment">コメント</th>
        <th class="state">状態</th>
        <th class="button">-</th>
      </tr>
    </thead>
    <tbody>
      <!-- [1] ここに <tr> で ToDo の要素を1行づつ繰り返し表示したい -->
    </tbody>
  </table>
</div>

CSS

.container{
  width: 90%;
  margin: 0 auto;
}

Vue

var vm = new Vue({
    el: '#app',
    data: {
      lists: [
      {id:1, title: 'aaaaa'},
      {id:2, title: 'bbbbb'},
      {id:3, title: 'ccccc'},
      {id:4, title: 'ddddd'},
      
      ]
    },
    methods: {
      createLists: function() {
      	for(let i = 0; i <= 5; i++) {
          this.lists.push('aaa');
        }
      },
      deleteLists: function() {
      this.lists = [];
      }
    }
});