On gists

04 multiple v-model

cdruc vue

CheckoutForm.vue Raw #

<template>
    <form class="my-20 mx-auto max-w-2xl">
        <h3 class="mb-2 mt-6 text-lg font-medium">Personal info</h3>
        <div class="grid grid-cols-2 gap-6 mb-6">
            <label class="block text-sm font-medium text-gray-700">
                First name
                <input 
                       class="block mt-1 w-full text-sm placeholder-gray-400 rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500" 
                       type="text"
                       v-model="form.firstName"
                       placeholder="First name"
                />
            </label>

            <label class="block text-sm font-medium text-gray-700">
                Last name
                <input 
                       class="block mt-1 w-full text-sm placeholder-gray-400 rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500" 
                       type="text"
                       v-model="form.lastName"
                       placeholder="Last name"
                />
            </label>

            <label class="block text-sm font-medium text-gray-700">
                E-mail
                <input 
                       class="block mt-1 w-full text-sm placeholder-gray-400 rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500" 
                       type="email"
                       v-model="form.email"
                       placeholder="E-mail address"
                />
            </label>
        </div>
        
        <AddressFieldGroup
            label="Delivery address"
            v-model:street="form.deliveryAddress.street"
            v-model:streetNumber="form.deliveryAddress.streetNumber"
            v-model:postcode="form.deliveryAddress.postcode"
            v-model:city="form.deliveryAddress.city"
        />
        
        <AddressFieldGroup
            label="Billing address"
            v-model:street="form.billingAddress.street"
            v-model:streetNumber="form.billingAddress.streetNumber"
            v-model:postcode="form.billingAddress.postcode"
            v-model:city="form.billingAddress.city"
        />

    </form>
</template>

<script>
import {ref} from 'vue';
import AddressFieldGroup from './AddressFieldGroup.vue';

export default {
    components: {AddressFieldGroup},
    setup() {
        const form = ref({
            firstName: '321321',
            lastName: '321321',
            email: '321321',
            deliveryAddress: {
                street: '321321',
                streetNumber: '321',
                postcode: '321',
                city: '321',
            },
            billingAddress: {
                street: '',
                streetNumber: '',
                postcode: '',
                city: '',
            },
        });

        return {
            form,
        };
    },
};
</script>

AddressFieldGroup.vue Raw #

<template>
    <h3 class="mb-2 mt-6 text-lg font-medium">{{ label }}</h3>
    <div class="grid grid-cols-3 gap-5">
        <label class="col-span-2 block text-sm font-medium text-gray-700">
            Street
            <input class="block mt-1 w-full text-sm placeholder-gray-400 rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500"
                   type="text"
                   @input="$emit('update:street', $event.target.value)"
                   :value="street"
                   placeholder="Street"/>
        </label>

        <label class="block text-sm font-medium text-gray-700">
            Number
            <input class="block mt-1 w-full text-sm placeholder-gray-400 rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500"
                   type="text"
                   @input="$emit('update:streetNumber', $event.target.value)"
                   :value="streetNumber"
                   placeholder="Number"/>
        </label>

        <label class="block text-sm font-medium text-gray-700">
            Postcode
            <input class="block mt-1 w-full text-sm placeholder-gray-400 rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500"
                   type="text"
                   @input="$emit('update:postcode', $event.target.value)"
                   :value="postcode"
                   placeholder="Postcode"/>
        </label>

        <label class="block text-sm font-medium text-gray-700">
            City
            <input class="block mt-1 w-full text-sm placeholder-gray-400 rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500"
                   type="text"
                   @input="$emit('update:city', $event.target.value)"
                   :value="city"
                   placeholder="City"/>
        </label>
    </div>
</template>

<script>
export default {
    props: {
        label: {
            type: String,
            default: '',
        },
        street: {
            type: String,
            default: '',
        },
        streetNumber: {
            type: String,
            default: '',
        },
        postcode: {
            type: String,
            default: '',
        },
        city: {
            type: String,
            default: '',
        },
    },
};
</script>