在 Laravel 中使用 Vue 在 Foreach 循环中递增、递减值答案

【问题标题】：Increment, Decrement Value In A Foreach Loop Using Vue in Laravel在 Laravel 中使用 Vue 在 Foreach 循环中递增、递减值
【发布时间】：2019-12-20 11:30:30
【问题描述】：

我的项目有问题。我想在 foreach 循环中递增、递减值，这是我的代码

<div class="booking__left__content__addons__content__card" v-for="addOn in addOnGroup.addOns">
<div class="booking-quantity">
    <div class="booking-quantity__inner">
        <input type="button" class="qty-button qty-button__minus" v-on:click="decrementAddOn($event, addOn.pivot.id)">
        <input type="text" class="form-control" v-model="selectedGroupedAddOns[addOn.pivot.id]" placeholder="1">
        <input type="button" class="qty-button qty-button__plus" v-on:click="incrementAddOn($event, addOn.pivot.id)">
    </div>
</div>

我的 Vue 代码是

incrementAddOn(event, key) {
    this.selectedGroupedAddOns[key]++;
},

decrementAddOn(event, key) {
    if(this.selectedGroupedAddOns[key] > 0) { 
        this.selectedGroupedAddOns[key]--;
    }
},

代码不工作。在我的控制台中，我得到 this.selectedGroupedAddOns[key] 是 undefined

【问题讨论】：

你能提供来自this.selectedGroupedAddOns的数据吗？
我在this.selectedGroupedAddOns中没有得到任何值

标签： javascript laravel vue.js

【解决方案1】：

如果您在控制台上未定义 this.selectedGroupedAddOns[key]，则 addOn.pivot.id parameter 大部分未定义，或者您的 selectedGroupedAddOns 数组中不存在该值。

先在控制台查看addOn.pivot.id的值。

在 id 的更新方法上添加计数器值，如下所示。

incrementAddOn(event, key) {
if(this.selectedGroupedAddOns[key]){
    this.selectedGroupedAddOns[key]++;
} else {
    this.selectedGroupedAddOns[key] = 1;
}
},

decrementAddOn(event, key) {
    if(this.selectedGroupedAddOns[key] && this.selectedGroupedAddOns[key] > 0 ) { 
        this.selectedGroupedAddOns[key]--;
    } else {
        this.selectedGroupedAddOns[key] = 0;
    }
},

【讨论】：

addOn.pivot.id 中存在值，但this.selectedGroupedAddOns 没有得到任何值
你的意思是你在函数中得到了一个有效的 console.log(key) 值。
请发布您的 selectedGroupedAddOns 数组数据。
我的selectedGroupedAddOns 为空。 data() { return { selectedGroupedAddOns : [] } },
这意味着你的数组是空的，要在数组中增加一个值，首先你需要数组本身的一些值。