前端筆記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]