Checkboxes

Hi, I'm trying to make a checkbox do two things. I need it to calculate a price and add description to array.

So I would have two arrays. servicePrice and serviceDesc. I'm getting all service from a database which it taken in as a prop. Should I have a hidden checkbox which is checked when checkbox A is checked?

Or any better ideas?

So it would look something like this:

<div v-for="service in services">
    <div v-if="service.carType === 'Fólksbíll'" class="flex flex-wrap -mx-6">
        <label class="w-full md:w-1/3 px-3 mb-6 md:mb-0 block">
            <input type="checkbox" :value="service.id" v-model="selectedService" @click="addServiceToArray">
            <span class="font-normal text-white" v-text="service.description"></span>
        </label>
    </div>
</div>

data() {
    return {
        services: [],
        selectedService: [],
        servicePrice: [],
        serviceDesc: [],
    }
}

methods: {
    addServiceToArray() {
        if (this.services === selectedService.value) {
            // DO SOMETHING
        }
    }
}

Is there a better way to do this?

hjortur17

6 years ago

Best Answer

Level 14

<input class="mr-2 leading-tight" type="checkbox" v-model="checked" @click="servicesToArray(service)">
<input class="mr-2 leading-tight" type="checkbox" :value="service.description" hidden>
<span class="font-normal text-white" v-text="service.description"></span>

servicesToArray(object) {
                if (this.checked = true) {
                    this.selectedServicesDesc.push(object.description);
                    this.selectedServicesPrices.push(object.price);
                }
            }

jlrdw

6 years ago

Level 75

You seem to be asking a lot of questions then suddenly giving yourself best answer.

Please or to participate in this conversation.