vue.js 单击“加”或“减”后,值如何立即更改

gab6jxml  于 2022-12-30  发布在  Vue.js
关注(0)|答案(2)|浏览(162)

嗨,目前我正在做一个加减函数,我面临的问题是,一旦我点击了加减,值仍然保持不变...我也使用了手表属性,它仍然不工作
get_list正在从API调用

<b-row v-for="(data,i) in get_list" :key="i" class="mt-3 mx-0">>
 <b-button pill
     class="quantity-btn btn-secondary"
     @click="addQuantity(data.id_product,data.id_style)"
  >
       <span style="transform: translateY(-5%);">+</span>
  </b-button>

  <div class="px-2">
     <b-form-input type="number" min="1" :max="data.quantity_available" :value="quantity"  v-model="data.cart_quantity" class="quantity-input"></b-form-input>
  </div>
   <b-button pill
      class="quantity-btn btn-secondary"
      @click="minusQuantity(data.id_product,data.id_style)"
    >
     <span style="transform: translateY(-5%);">-</span>
    </b-button>
</b-row>

脚本

data: () => ({
 
        get_list: [],
        quantity:0,

       
    }),

method :{

        addQuantity(id,style) {
            this.quantity++
            this.updateQuantity(id,style)
        },
        minusQuantity(id,style) {
            
                this.quantity--
                this.updateQuantity(id,style)
            
        },
},

 watch: {
        quantity(newVal, oldVal) {
            console.log('new'+newVal)
      
          
        }
    }
q35jwt9p

q35jwt9p1#

看看上面证明的代码中的这段代码。

<div class="px-2">
     <b-form-input type="number" min="1" :max="data.quantity_available" :value="quantity"  v-model="data.cart_quantity" class="quantity-input"></b-form-input>
  </div>

此处似乎在模板中使用了cart_quantity,而不是quantity,因此未更新。
要解决此问题,您可以更新数据对象的cart_quantity属性,而不是addQuantityminusQuantity中的quantity数据属性

methods: {
  addQuantity(id, style) {
    this.get_list.forEach(item => {
      if (item.id_product === id && item.id_style === style) {
        item.cart_quantity++;
      }
    });
  },
  minusQuantity(id, style) {
    this.get_list.forEach(item => {
      if (item.id_product === id && item.id_style === style) {
        item.cart_quantity--;
      }
    });
  }
}

请删除watch属性,因为它似乎不是必需的。

lf5gs5x2

lf5gs5x22#

问题是您正在对quantity变量执行add/minus操作,但在模板中,您使用的cart_quantity变量不是递增/递减的。
因此,根据您的逻辑使用quantitycart_quantity

addQuantity(id, style) {
  this.cart_quantity++;
  // If you are using quantity as v-model
  // this.quantity++
  this.updateQuantity(id, style);
},
minusQuantity(id, style) {
  this.cart_quantity--;
  // If you are using quantity as v-model
  // this.quantity--
  this.updateQuantity(id, style);
},

还有一件事,你不需要同时使用valuev-model,如果你想给予input一些初始值,只要把这个值赋给你的cart_quantity就可以了。
最后一点,你也不需要一个观察者。

相关问题