Calculation problem

Hi, I have a array of services where users can check a checkbox and select a service they want. But I'm having problem figuring out how can I calculate the price. My solution always always subtracts the last service check but and that leads up getting the price lower than the starting price. Any way to subtract the checked price?

Here is my solution:

DIV

<div class="flex flex-wrap flex-row">
    <div v-for="service in services" v-if="service.carSize === booking.carSize" class="w-1/3 -mx-4">
        <div class="flex-1 p-4">
            <div class="flex">
                <div class="flex-1">
                    <input class="leading-tight" type="checkbox" :value="service.id" v-model="booking.checkedService" @click="addToArray(service.id); updatePriceAfterServices(service)" :id="service.id" :aria-label="service.description">
                </div>
                <div class="w-full ml-2 self-center">
                    <p class="font-bold" v-text="service.description"></p>
                    <p class="italic" v-text="service.price.price + 'kr'"></p>
                </div>
            </div>
        </div>
    </div>
</div>

METHOD

updatePriceAfterServices: function (service) {
    var startPrice = Number(this.extraPriceForDays + this.startPrice);
    var servicePrice = Number(service.price.price);
            
    if (this.booking.checkedService.includes(service.id)) {
        return this.finalPrice = Math.abs(startPrice+servicePrice);
    } else {
        return this.finalPrice = Math.abs((this.finalPrice)-servicePrice);
    }
},

ahmeddabak

6 years ago

Level 47

I would store a lookup table (array) with the services and their prices, then with es6 it should be easy to filter all the services to only the ones selected and then sum the price field

1 like

hjortur17

6 years ago

Best Answer

Level 14

I split it up to 4 computed methods:

        daysPrice: function () {
            if (this.numberOfDays > 5) {
                return ((this.numberOfDays*1500)-7500);
            } else {
                return 0;
            }
        },
        carSizePrice: function () {
            if (this.booking.carSize === 'Fólksbíll/Jepplingur') {
                return '19900';
            }
            if (this.booking.carSize === 'Jeppi') {
                return '24900';
            }
            if (this.booking.carSize === 'Yfirstærð') {
                return '28900';
            }
        },
        servicesPrice: function () {
            let filtered = _.filter(this.services, (v) => _.includes(this.booking.checkedService, v.id));
            let finalPrice = 0;

            for (var i = filtered.length - 1; i >= 0; i--) {
                finalPrice = Number(finalPrice) + Number(filtered[i].price.price);
            }

            return finalPrice;
        },
        finalPrice: function () {
            let price = Number(this.daysPrice)+Number(this.carSizePrice)+Number(this.servicesPrice);

            return price;
        },

Please or to participate in this conversation.