HTML Select input for Laravel Jetstream using Vue3

Laravel Jetstream is a starter kit for Laravel which gives developers a good base to build from. It gives a decent basic user interface (UI) and adds a few bells and whistles such as profile management, API management and 2 factor authentication (2FA). It is written in Tailwind so suits my current usage of that particular CSS Framework.

Was in need of a Select input using Vue3 (as I have gone the Laravel Inertia route) for a project I've just started using Laravel Jetstream. They don't provide a select input as part of the supplied component collection, so created one myself. I used the TextInput they do provide as a basis for this.

Update Was using the wrong event to fire model update. Changed to use @change event.

<script setup>

defineProps({
    modelValue: String,
    keyIndex: String,
    valueIndex: String,
    labelIndex: String,
    data: Array
});

defineEmits(['update:modelValue']);
</script>

<template>
    <select 
		ref="input"
		:value="modelValue"
		@change="$emit('update:modelValue', $event.target.value)"
        class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
	>
        <option :key="item[keyIndex]" :value="item[valueIndex]" v-for="item in data">{{ item[labelIndex] }}</option>
    </select>
</template>

Usage of the component looks like the following...

<SelectInput 
	v-model="form.country_id" 
	keyIndex="code"
	valueIndex="id"
	labelIndex="name"
	:data="countries"
	class="mt-1 block w-full"
/>

In this the v-model attribute is the attribute in the form that you want to update when the selected item changes, keyIndex is the name of the item in your array of data objects passed that you want to use as the key, valueIndex is the item in the array that you want to use for the <option> value, labelIndex is the name of the item in the array you want to use for the select label. Data is passed to the component via the data attribute.