Vue: issue with reactive object not updating?

Question

I have an item card component I set with an v-for, inside each component you can increase or decrease the number of items the user want to add to the cart, when I click I get an alert and the count increases/decreases as it should but the value discount.quantity doesn't update in mu view, it's always 1 (default value).

I know about reactivity caveats and I'm using Vue.set to make the property reactive but it's not updating... check my component:

<template>
<div class="DISCOUNTlist6_item_container shadow">
    <div class="DISCOUNTlist6_item_texts_container">
        <div class="DISCOUNTlist6_item_texts_quantity_container" style="width:100%; height:auto; display:flex;  justify-content:space-between; flex-wrap:no-wrap; margin:20px 0px 0px 0px;">
            <div class="DISCOUNTlist6_item_texts_quantity_row_container" style="width:35%; height:40px; display:flex;">
                <button class="DISCOUNTlist6_item_texts_quantity_button" @click="decreaseQuantityByOne()" style="width:40px; height:40px; display:flex; align-items:center; justify-content:center; background-color:rgb(10,10,10);" type="button"><i class="fa fa-minus fs_smaller c_light"></i></button>
                <div class="DISCOUNTlist6_item_texts_quantity_number fs_big c_normal" style="flex:1; height:100%; display:flex; align-items:center; background-color:white; justify-content:center;">{{ discount.quantity }}</div>
                <button class="DISCOUNTlist6_item_texts_quantity_button" @click="increaseQuantityByOne()" style="width:40px; height:40px; display:flex; align-items:center; justify-content:center; background-color:rgb(10,10,10);" type="button"><i class="fa fa-plus fs_smaller c_light"></i></button>
            </div>
            <button class="DISCOUNTlist6_item_texts_quantity_cart_button secondary fs_big" @click="getDiscountData()" :disabled="!globals.auth" style="width:62%; height:40px; background-color:var(--web_primary_color);">Añadir al carrito</button>
        </div>
    </div>
</div>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapActions, mapMutations } from 'vuex';
export default {
name: 'DISCOUNTcard5',


props:
{
    discount: {required:true},
},


methods:
{


    ...mapActions('Cart', ['addProductToCart']),

    decreaseQuantityByOne: function()
    {
        if(this.discount.quantity > 1){
            this.discount.quantity = this.discount.quantity - 1;
        }
    },


    increaseQuantityByOne: function()
    {
        if(this.discount.quantity < this.discount.stock_left){
            //this.discount.quantity = this.discount.quantity + 1;
            //Vue.set(this.discount, 'quantity', this.discount.quantity + 1)
            this.$set(this.discount, 'quantity',  this.discount.quantity + 1)
            alert(this.discount.quantity);
        }
    },
}


};
</script>

Any errors in the console?

d-_-b
– d-_-b

2019-06-09 15:54:07 +00:00
Commented Jun 9, 2019 at 15:54 — d-_-b
– d-_-b, Commented Jun 9, 2019 at 15:54
nope, no warning

gabogabans
– gabogabans

2019-06-09 19:36:12 +00:00
Commented Jun 9, 2019 at 19:36 — gabogabans
– gabogabans, Commented Jun 9, 2019 at 19:36
see stackoverflow.com/a/56519956/335243

y_nk
– y_nk

2019-06-10 02:56:29 +00:00
Commented Jun 10, 2019 at 2:56 — y_nk
– y_nk, Commented Jun 10, 2019 at 2:56

tony19 · Accepted Answer · 2022-07-16 03:11:34Z

0

See One-Way Data Flow:

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand.

In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should not attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.

Instead, use a proper data property that you can update in the child component.

edited Jul 16, 2022 at 3:11

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 9, 2019 at 16:00

str

45.5k18 gold badges117 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue: issue with reactive object not updating?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related