This website uses cookies to track usage of this website and to deliver targetted advertising. Please read our Cookie Policy and Privacy Policy for further details of our usage. Continued use of this website indicates acceptance of our use of these cookies.

HTML Select input for Laravel Jetstream using Vue3

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>

    modelValue: String,
    keyIndex: String,
    valueIndex: String,
    labelIndex: String,
    data: Array


		@change="$emit('update:modelValue', $"
        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>

Usage of the component looks like the following...

	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.

More Web Development, PHP, WordPress and Shopify Posts

Search Posts

Share on Social

Get in touch for a quick, free personalised web design quote

Need some help on your WordPress, Laravel or Shopify project?

Get A Web Quote