<table class="table table-bg table-border table-bordered">
 <tr>
  <th>ID</th>
  <th>書名</th>
  <th>作者</th>
  <th>價格</th>
  <th>操作</th>
 </tr>
 <tr v-for="(book,index) in books">
  <td>{{book.id}}</td>
  <td>{{book.name}}</td>
  <td>{{book.author}}</td>
  <td>{{book.price}}</td>
  <td>
   <button class="btn" @click="delBook(index)">刪除</button>
  </td>
 </tr>
</table>

<fieldset>
 <legend>添加新書</legend>
 <p>書名：<input type="text" v-model="newBook.name"></p>
 <p>作者：<input type="text" v-model="newBook.author"></p>
 <p>價格：<input type="text" v-model="newBook.price"></p>
 <p><button class="btn" @click="addBook">添加</button></p>
</fieldset>

<script>
new Vue({
 el:'#books',
 data:{
  books:[
   {id:1, name:'紅樓夢', author:'曹雪芹', price:'1'},
   {id:2, name:'西游記', author:'吳承恩', price:'2'},
   {id:3, name:'水滸傳', author:'施耐庵', price:'3'}
  ],
  newBook:{
   id:0,
   name:'',
   author:'',
   price:''
  }
 },
 methods:{
  delBook:function(idx){
   if(window.confirm('確認要刪除？')){
    this.books.splice(idx, 1);
   }

  },
  addBook:function(){
   // 約束
   if(this.newBook.name.length == 0) {
    alert('書名不能為空');
    return;
   } 

   if(this.newBook.author.length == 0){
    alert('書的作者不能為空');
    return;
   }

   if(this.newBook.price.length == 0){
    this.newBook.price = '0'
   } 

   // 計算插入id
   var maxId = 0;
   for(var i=0; i<this.books.length; i++){
    if(maxId<this.books[i].id){
     maxId = this.books[i].id;
    }
   }
   this.newBook.id = maxId+1;

   // 插入到 books中
   this.books.push(this.newBook);

   // 清空新書
   this.newBook = {};
  }
 }
});
</script>