添加到购物车无法使用 Laravel 和 vue js？答案

【问题标题】：Add to cart not working Laravel and vue js?添加到购物车无法使用 Laravel 和 vue js？
【发布时间】：2020-04-02 10:27:11
【问题描述】：

嗨，我正在使用 laravel 和 vue 开发电子商务。它成功地将产品添加到购物车，但购物车数量中的值保持为 0，直到我刷新页面然后它出现。我尝试了很多，但现在可以工作了。消息显示产品已添加到购物车，但数量在刷新之前不会更新

laravel 刀片：

<li class="cart" id="cart">
          <a href="#"><i class="fas fa-shopping-cart"></i></a>
          <span class="d-block" id="itemsCountVue">@{{itemsCount}}</span>
          <span class="d-none" id="itemsCountJquery"></span>
        </li>

Vue JS

<script>

  var details = new Vue({
    el: '#app1',
    data: {},
    methods: {
      addtocart(productid, quantity) {
        console.log(productid, quantity);
        var fd = new FormData(document.getElementById('attrform'));
        fd.append('productid', productid);
        fd.append('quantity', quantity);
        $.ajax({
          url: '{{route('user.cart.getproductdetails')}}',
          type: 'POST',
          data: fd,
          contentType: false,
          processData: false,
          success: (data) => {
            console.log(data);

            if (data.status == 'productadded') {
              // console.log(data.product.cartattr);
              nav.products.push(data.product);
              nav.itemsCount = parseInt(nav.itemsCount) + parseInt(data.quantity);
              if ((nav.precartlen + nav.products.length) > 0) {
                nav.noproduct = false;
                nav.checkoutbtn = true;
              }
              // Fire toastr
              toastr["success"]("<strong>Success!</strong> Added to cart!");
            } else if (data.status == 'shortage') {
              toastr["error"]("<strong>Sorry!</strong> Vendor has "+ data.quantity +" items left for this product!");
            } else if (data.status == 'removed') {
              toastr["error"]("<strong>Sorry!</strong> Vendor has removed this product!");
            } else if (data.status == 'quantityincr') {
              $("#quantity"+data.product.cart_id).html('('+data.quantity+')');

              nav.itemsCount = parseInt(nav.itemsCount) + parseInt(data.product.quantity);
              toastr["success"]("<strong>Success!</strong> Added to cart!");
            }
          }
        });

      }

    }
  })
  </script>

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

模板包含：

<span class="d-block" id="itemsCountVue">@{{itemsCount}}</span>

itemsCount 没有在 vue 数据对象内部定义，也没有定义为计算属性。

你可以试试：

el: '#app1',
data: {
    itemsCount: 0,
},

然后在你设置 nav.itemsCount 的任何地方也设置 this.itemsCount

【讨论】：