APIコール（ビュー）の後でビューを更新する方法

Question

私はLaravelとVueで簡単なショッピングカートシステムを作っています。私は正常にバスケットから項目を追加したり削除したりすることができます。ただし、アイテムを削除すると、変更が反映されているかどうかを確認するためにページを更新する必要があります。ここで

は私のバスケットビューです：削除ボタンをクリックする

<table class="table table-striped" > 
     <thead> 
      <th>Item</th> 
      <th>Price each</th> 
      <th>Quantity</th> 
      <th>Update</th> 
      <th>Delete</th> 
     </thead> 
     <tbody> 
     <tr v-for="item in basketItems"> 
      <td>@{{ item.name }}</td> 
      <td>&pound;@{{ item.price }}.00</td> 
      <td>@{{ item.quantity }}</td> 
      <td><button class="btn btn-primary btn-sm">Update</button></td> 
      <td><button class="btn btn-secondary btn-sm" v-on:click="removeItem(item.id)">Delete</button></td> 
     </tr> 
    </tbody> 
</table> 

はVueの中で、この関数を呼び出します。

コントローラでこの機能をトリガ

removeItem: function(id){ 
       this.$http.post('api/buy/removeItem', { id: id }); 
      } 

：

public function removeItem(Request $request){ 
     $id = $request->input('id'); 
     $this->cart->find($id)->remove(); 
    } 

このバックグラウンドではすべて正常に動作しますが、ビューは当然変わりません。ビューから削除したアイテムを削除するにはどうしたらいいですか？

Answer 1

代わりに、単にIDを渡す、removeItem関数に全アイテムを渡す：

v-on:click="removeItem(item)" 

は、その後のAPI呼び出しの前または後に、項目を削除：

removeItem: function(item){ 
    this.basketItems.$remove(item); 
    this.$http.post('api/buy/removeItem', { id: item.id }); 
} 

または

removeItem: function(item){ 
    this.$http.post('api/buy/removeItem', { id: item.id }) 
     .then(function(){ 
     this.basketItems.$remove(item); 
     }.bind(this); 
}