I am currently working with an array of objects that contain both an id and a name property:
Teams [
{ id: 1, name: 'team1' },
{ id:2, name: 'team2' }
]
Is there a way to dynamically pass the names as items in a vuetify select component, where selecting a name would automatically set the corresponding object's id as the v-model value?:
<v-select
v-model="???"
:items="???"
label="Teams"
></v-select>
I assume this functionality needs to be implemented within the created method, but I'm unsure about the correct approach. Currently, I populate the teams array with data fetched from the app's initial store retrieval:
this.teams = this.$store.state.teams.teams
The data is retrieved from a Laravel backend as a collection, leading me to consider transforming it into an id: name key-value pair on that end, even though it feels unnecessary. At present, my resource controller utilizes the following eloquent query in the index method:
$teams = Team::all();
return response()->json($teams);
I have experience implementing this feature using a standard select element, but I am uncertain about how to proceed with Vuetify’s v-select component:
<select id="categories" v-model="selectedValue">
<option v-for="item in items" :value="item.id">{{ item.name }}</option>
</select>