基于Vue.js实现多点击服务数组价格计算的问题排查

1. 核心计算逻辑错误（calculateTotalAdditionalService方法） #

原方法存在两个致命问题：

• 循环条件错误：i<=this.AdditionalServices.length会遍历到超出数组索引的位置（数组索引从0开始，最大索引为length-1），最后一次循环的i等于数组长度，此时this.AdditionalServices[i]为undefined，直接访问i.active会报错。
• 索引误用：循环中直接用i.active和i.price，但i是循环索引，并非服务对象，必须通过this.AdditionalServices[i]获取对应服务的属性。

修复后的代码：

calculateTotalAdditionalService() {
    let total = 0;
    for(let i = 0; i < this.AdditionalServices.length; i++){
        const service = this.AdditionalServices[i];
        if (service.active){
            total += service.price;
        }
    }
    return total;
}

更简洁的写法（使用数组reduce方法）：

calculateTotalAdditionalService() {
    return this.AdditionalServices.reduce((total, service) => {
        return service.active ? total + service.price : total;
    }, 0);
}

2. HTML复选框ID重复问题 #

v-for循环中所有复选框的id和label的for属性都固定为smart_paper，导致点击标签时所有复选框都触发同一个控件，无法正确绑定单个服务。需动态生成唯一标识：

修复后的HTML片段（修改input的id、label的for，并添加状态绑定）：

<div class="rc-orderform__feature-body--add-features__item" v-for="(service, index) in AdditionalServices" :key="index">
    <div class="rc-validation-representer valid" data-invalid="false">
        <div class="AdditionalFeature__checkbox filled" data-testid="smartPaperControl">
            <label class="UICheckbox UICheckbox--theme-default" :for="`smart_paper_${index}`">
                <input :id="`smart_paper_${index}`" type="checkbox" class="UICheckbox__checkbox UICheckbox__checkbox--theme-default UICheckbox__checkbox--native" :name="`smart_paper_${index}`" v-on:click="toggleActive(service)" v-bind:class="{ 'active' : service.active }" :checked="service.active"/>
                <div class="UICheckbox__checkbox UICheckbox__checkbox--theme-default UICheckbox__checkbox--faux" tabindex="0"></div>
                <div class="UICheckbox__label UICheckbox__label--theme--default" :for="`smart_paper_${index}`">
                    <div class="AdditionalFeature__label">
                        <div class="AdditionalFeature__header">
                            <div class="AdditionalFeature__title" data-testid="additionalFeature-title">{{service.name}}</div>
                            <div class="AdditionalFeature__price" data-testid="additionalFeature-price"><span>{{service.price}}</span></div>
                        </div>
                        <p class="AdditionalFeature__subtitle" data-testid="additionalFeature-subtitle">{{service.short_description}}</p>
                        <p class="AdditionalFeature__description" data-testid="additionalFeature-description">
                            {{service.long_description}}
                        </p>
                    </div>
                </div>
            </label>
        </div>
    </div>
</div>

3. 冗余的calculateTotal方法 #

原方法包含大量冗余代码，直接返回额外服务总价即可：

calculateTotal : function (){
    return this.calculateTotalAdditionalService();
}

4. 响应式更新优化（可选） #

如果使用Vue 2，直接修改对象属性s.active = !s.active可触发响应式，但遇到更新不及时的情况，可改用this.$set确保响应式：

toggleActive: function(s) {
    this.$set(s, 'active', !s.active);
}

内容的提问来源于stack exchange，提问作者Kevin Otieno