前端笔记Vue项目day2(九）

 

6 删除图书

• 6.1 给删除按钮添加事件 把当前需要删除的书籍id 传递过来

• 6.2 根据id从数组中查找元素的索引

• 6.3 根据索引删除数组元素

• [mw_shl_code=applescript,true] <tbody>
            <tr :key='item.id' v-for='item in books'>
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.date}}</td>
              <td>
                <a href="" @click.prevent='toEdit(item.id)'>修改</a>
                <span>|</span>
                 <!--  6.1 给删除按钮添加事件 把当前需要删除的书籍id 传递过来  --> 
                <a href="" @click.prevent='deleteBook(item.id)'>删除</a>
              </td>
            </tr>
  </tbody>
    <script type="text/javascript">
      /*
        图书管理-添加图书
      */
      var vm = new Vue({
        methods: {
          deleteBook: function(id){
            // 删除图书
            #// 6.2 根据id从数组中查找元素的索引
            // var index = this.books.findIndex(function(item){
            //   return item.id == id;
            // });
            #// 6.3 根据索引删除数组元素
            // this.books.splice(index, 1);
            // -------------------------
           #// 方法二：通过filter方法进行删除
                  
            # 6.4  根据filter 方法 过滤出来id 不是要删除书籍的id 
            # 因为 filter 是替换数组不会修改原始数据 所以需要 把 不是要删除书籍的id  赋值给 books 
            this.books = this.books.filter(function(item){
              return item.id != id;
            });
          }
        }
      });
    </script>[/mw_shl_code]