Vue_개별 삭제, 선택 삭제

<template>

    <div>

      <h1>{{ mesg }}</h1>

 

          <div v-for="(book, idx) in BookList" :key="idx">

             <input type="checkbox" v-bind:value=book.name  v-model="books">

              {{ book.name }} &nbsp; {{ book.price }}

              <button @click="deleteBook(idx)">삭제</button>

          </div>

      <hr>

          <button @click="deleteSelected">선택 삭제</button>

 

 

    </div>

  </template>

  <script>

  export default {

      props:{

          mesg:String

      },

      data:function(){

          return {

              BookList: [

                  {name:"자바의 정석", price:3000},

                  {name:"jsp 정석", price:4000},

                  {name:"spring 정석", price:5000},

                  {name:"jquery 정석", price:6000},

                  {name:"angular 정석", price:7000},

              ],

              books: []

          }

      },

      methods: {

          deleteBook(idx){

              this.BookList.splice(idx,1);

          },

         

          deleteSelected(){

             

              for (let index = 0; index < this.books.length; index++) {

 

                  for (let i = 0; i < this.BookList.length; i++) {

 

                      if(this.books[index] == this.BookList[i].name){

                          this.BookList.splice(i,1);

                          break;

                      }

                  }

              }

 

              // let b = this.BookList;              //변수 저장을 안 해주면 map 안에서 this.BookList를 못 불러옴

              // this.books.map(function(ele, idx){  

              //     b.map(function(e, i){

              //         if(ele == e.name){

              //             b.splice(i,1);

              //         }

              //     })

              // })

 

              this.books = [];

          }

      }

  }

  </script>

 

  <style>

 

  </style>