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

如何在API调用（Vue）

1 个答案: