Vuetify: [Bug Report] v-select doesn't show selected option if "value" is an object and it's specified in v-model

Created on 16 Apr 2018 · 6Comments · Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.0.14
Vue: 2.5.16
Browsers: Safari 11.1
OS: Mac OS 10.13.4

Steps to reproduce

Make a v-select with object as a value.
Specify an object of the same scheme as v-model.

Expected Behavior

Corresponding option should be selected.

Actual Behavior

Nothing is selected.

Reproduction Link

https://codepen.io/websanya/pen/NYQeYP

layer 8 issue

Source

websanya

Most helpful comment

What are you trying to do is the following:

const obj1 = {hi:'hello'};
const obj2 = {hi:'hello'};
console.log(obj1 === obj2)  //false

https://vuetifyjs.com/en/components/selects#example-custom-text-and-value

if you want to compare the object properties pass them as a parameter

  list: [
    {
      id: "1",
      name: "Foo"
    },
    {
       id: "2",
       name: "Bar"
    }
  ]

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

Renato66 on 16 Apr 2018

👍6

All 6 comments

What are you trying to do is the following:

const obj1 = {hi:'hello'};
const obj2 = {hi:'hello'};
console.log(obj1 === obj2)  //false

https://vuetifyjs.com/en/components/selects#example-custom-text-and-value

if you want to compare the object properties pass them as a parameter

  list: [
    {
      id: "1",
      name: "Foo"
    },
    {
       id: "2",
       name: "Bar"
    }
  ]

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

Renato66 on 16 Apr 2018

👍6

Your example would work only with two properties, right? If I need each option to be a 3-property object — I can't do that because of JS behavior?

websanya on 16 Apr 2018

you will need only 2 things: value and text

value: id.userCode
text: name.lastName

{
  id: {
    userCode: 1,
    something: 3
   },
   name: {
     firstName: 'foo',
     lastName: 'bar'
   }
}

Renato66 on 16 Apr 2018

I need to be able to select between complex object values by one input field. So I need v-model to actually store this complex value to send it to the api later.

websanya on 16 Apr 2018

You need to tell the select what it's supposed to key on with item-value and item-text. The value must be a primitive as v-select uses a strict equality check (===).

https://codepen.io/anon/pen/odvXVN?editors=1010

KaelWD on 17 Apr 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord