我正在用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>£@{{ 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();
}
这一切在后台工作正常,但视图自然保持不变。如何从视图中删除已删除的项目?
答案 0 :(得分: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);
}