mardi 25 septembre 2018

JS array of objects with an id and name set to Vuetify select :items so that you select a name and it sets the id as the value

I have an array of objects with an id and name:

Array [
    { id: 1, name: 'one' },
    { id:2, name: 'two' } 
]

Is there a way to pass the names to a vuetify select's items so that when you select a name, you'd set the object's id as the v-model value?:

<v-select
  v-model="???"
  :items="???"
  label="Teams"
></v-select>

I'm guessing this would be in the created method, but not really sure where to even start. Right now, I am setting an empty teams array to the teams that are in the store on the app's initial fetch:

this.teams = this.$store.state.teams.teams

I'm getting this as a collection from the laravel backend, so I was contemplating transforming to an id: name key value pair there. As it is, I'm just doing the most best eloquent query in the index method of my resource controller:

$teams = Team::all();

return response()->json($teams);

I know how to do this with a normal select, but not sure with vuetify's v-select:

<select id="categories" v-model="selectedValue">
    <option v-for="item in items" :value="item.id"></option>
</select>



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire