v-select binding values to objects

Question

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:

object have this structure: {'id': 'Foo','name':'Bar'}
And ObjectsArray is an array of objects with the same structure {'id': 'Foo','name':'Bar'}

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.

Michal Levý · Accepted Answer · 2019-12-24 22:56:10Z

1

1.

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

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

answered Dec 24, 2019 at 22:56

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Armando Rodríguez Acosta Over a year ago

Right in both cases. Thanks.

Collectives™ on Stack Overflow

v-select binding values to objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related