hjortur17
1 month ago
39
23
Vue

Calculate price with checkbox

Posted 1 month ago by hjortur17

Hi, I have a standard price and I want to update that when a checkbox is checked. Does anyone have a idea how to do that?

This is my component:

<template>
    <form class="w-full my-8">
        <div class="flex flex-wrap -mx-3">
            <label class="w-full md:w-1/3 px-3 mb-6 md:mb-0 block">
                <input class="mr-2 leading-tight" type="checkbox" :value="11500" @change="updatePrice">
                <span class="font-normal text-white">
                    Tjöruþvottur + alþrif að innan
                </span>
            </label>
            <label class="w-full md:w-1/3 px-3 mb-6 md:mb-0 block">
                <input class="mr-2 leading-tight" type="checkbox" :value="16000">
                <span class="font-normal text-white">
                    Bón + alþrif að innan
                </span>
            </label>
            <label class="w-full md:w-1/3 px-3 mb-6 md:mb-0 block">
                <input class="mr-2 leading-tight" type="checkbox" :value="6000">
                <span class="font-normal text-white">
                    Umfelgun
                </span>
            </label>
        </div>
        <div class="flex flex-wrap -mx-3 mb-">
            <label class="w-full md:w-1/3 px-3 mb-6 md:mb-0 block">
                <input class="mr-2 leading-tight" type="checkbox" :value="9000">
                <span class="font-normal text-white">
                    Olíuskipti
                </span>
            </label>
            <label class="w-full md:w-1/3 px-3 mb-6 md:mb-0 block">
                <input class="mr-2 leading-tight" type="checkbox" :value="10000">
                <span class="font-normal text-white">
                    Rúðuvökvi
                </span>
            </label>
            <label class="w-full md:w-1/3 px-3 mb-6 md:mb-0 block">
                <input class="mr-2 leading-tight" type="checkbox" :value="1500">
                <span class="font-normal text-white">
                    Fylla eldsneyti
                </span>
            </label>
        </div>

        <div class="flex flex-wrap -mx-3 pt-8">
            <div class="flex-1">
                <ul class="flex justify-between">
                    <li>
                        <h3 class="text-white uppercase font-regular text-xl"><span v-text="price"></span> kr.</h3>
                    </li>
                    <li>        
                        <a href="#" class="px-12 py-2 rounded-full bg-orange-500 hover:bg-orange-400 transition text-white font-bold uppercase float-right">Borga</a>
                    </li>
                </ul>
            </div>
        </div>
    </form>
</template>

<script>
    export default {
        data() {
            return {
                price: 5000
            }
        },
        methods: {
            updatePrice() {
                this.value + price;
            }
        }
    }
</script>

Please sign in or create an account to participate in this conversation.