Vue 기반 도서 관리 기능 구현

<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>