Question

我有一个带v-for设置的物品卡组件，在每个组件内，您可以增加或减少用户想要添加到购物车中的物品数量，当我单击“我收到警报并且计数增加/会减少，但值折扣。mu视图中的值不会更新，始终为1（默认值）。

我了解反应性警告，并且我正在使用Vue.set使该属性具有反应性，但是它没有更新...请检查我的组件：

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

Answer 1

请参见One-Way Data Flow：

所有道具在子属性和父属性之间形成单向绑定：当父属性更新时，它将向下流到子属性，但不会反过来。这样可以防止子组件意外更改父组件的状态，从而使您的应用数据流更难以理解。

此外，每次更新父组件时，子组件中的所有道具都会以最新值刷新。这意味着您不应该尝试在子组件内部修改道具。如果这样做，Vue会在控制台中警告您。

相反，请使用可以在子组件中更新的适当的data property。

Vue：反应性对象未更新的问题？

1 个答案: