vuetify use selected value
- Import the necessary components from Vuetify and Vue.
<template>
<v-select
v-model="selectedItem"
:items="items"
label="Select an item"
></v-select>
</template>
<script>
export default {
data() {
return {
selectedItem: null,
items: [
{ text: 'Item 1', value: 1 },
{ text: 'Item 2', value: 2 },
{ text: 'Item 3', value: 3 },
],
};
},
};
</script>
Define a data property (
selectedItem
) to store the selected value and an array (items
) containing the options with their respective text and values.Use the
v-select
component from Vuetify with thev-model
directive to bind the selected value to theselectedItem
data property.Set the
:items
attribute to the array (items
) containing the options.Include the
label
attribute to provide a label for the dropdown.Customize the
items
array with the desired text and values for each option.The selected value will be stored in the
selectedItem
data property for further use in your Vue component.