CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Armando Rodríguez Acosta
Armando Rodríguez Acosta

Reputation: 305

v-select binding values to objects

I have a v-select that maps objects this way:

<v-select
      v-model="object"
      :items="objectsArray"
      label="Select Object"          
      item-text="name"
      item-value="id"
></v-select>

Where:

Here is the thing: When initial render happens works fine displaying the name property in the select, but when change object becomes a string with the 'name' of the selected Item i.e. 'Bar' .

Questions: 1-How can object be replaced with the full value of selected items i.e: {'id':'Foo','name':'Bar'} instead of the item-text property only. 2-How can object be replaced with id property only i.e.'Foo'.

Observation: If removes item-text form v-select. Shows [Object object] on the select BUT on change updates object with the item-value property in this case the id.

Upvotes: 1

Views: 1269

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37753

1.

<v-select
      v-model="object"
      :items="objectsArray"
      label="Select Object"          
      item-text="name"
      item-value="id"
      return-object
></v-select>
  1. v-model always reflects value of property defined in item-value, not the item-text. So in your example select will show Bar and v-model will have the value of Foo

Upvotes: 1

Related Questions