如何在API调用(Vue)

时间:2016-07-14 12:53:12

标签: laravel vue.js

我正在用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();
    }

这一切在后台工作正常,但视图自然保持不变。如何从视图中删除已删除的项目?

1 个答案:

答案 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);
 }