Добавить в корзину не работает Laravel и vue js?

Question

привет, я разрабатываю ecomerce с laravel и vue. он успешно добавляет товар в корзину, но значение в количестве корзины остается 0 до тех пор, пока я не обновлю sh страницу, а затем ее появление. Я много пробовал, но теперь работаю. Появляется сообщение, что продукт добавлен в корзину, но количество не обновляется до обновления sh

laravel blade:

<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>

Answer 1

Шаблон содержит:

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

itemsCount не определен внутри объекта данных vue и также не определен как вычисляемое свойство.

Вы можете попробовать:

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

Тогда везде, где вы устанавливаете nav.itemsCount, также устанавливайте this.itemsCount