[Vuejs]-Vue.js Axios bug HTTP request change my array but don't show change

by

0👍

✅

The problem is that we must refresh the data of Product with the props.

Basically when the parent (here the Cart component) change the quantity of Product with the props (here initQuantity), we must say to Product instance that he must change is data (here quantity) with his props (initQuantity).

So we must add a watch at the end of Product component :

    computed: {
        ...
    },

    watch: {
        initQuantity( newQuantity ){
            this.quantity = newQuantity;
        }
    }

I found my answer here

0👍

One error I see is, you have props in camelCase such as priceWithCurrency, for these props, you have to use kebab-case when passing in the template as explained here:

template: "<div><h3>Cart:</h3>" +
    '<product @product-changed="updateProductsCart(product)"' +
    'style="display: inline-block; max-width: 90px;" v-for="product in products"' +
    ':id="product.id" :name="product.name" :price-with-currency="product.priceWithCurrency"' +
    ':init-quantity="product.initQuantity" :picture="product.picture" :has-deleted-btn="true"' +
    ':is-product-refresh-auto="false"></product>' +
"</div>",

Leave a comment