Vuetify v-select 值不返回键

Question

I am trying to v-model the keys from this data from my v-select:

{
data: {
IT: "Italy",
PL: "Poland",
AF: "Afghanistan",
AX: "Aland Islands",
AL: "Albania"
     }
}

My v-select and output look something like this (this is as close as i can get:

        {{ this.model[0] }}

        <v-select
        :items="Object.entries(this.items)"
        v-model="model"
        >
      </v-select>

The problem with this, is the value of the v-select will be "IT, Italy", when i just want Italy

I've been trying to work out ways, such as using a helper function to search the value and return a key, but i keep getting undefined, and wonder if there is an easier way of doing this. Or maybe converting the data to a new object.

If anyone has any ideas i would greatly appreciate it

Answer 1

It's better to return a countries property from data() (make it a function.) than to iterate through Object entries

data() {
    return {
      countries: [
        {key: 'IT', name: 'Italy'},
        {key: 'PL', name: 'Poland'} // ...

      ],
      country: null
    }
  }

Then in your template you can use it like this:

<v-select :items="countries" v-model="country" item-value="key" item-text="name"></v-select>

With the item-value and item-text props you can determine what is the displayed text and the current value

Answer 2

Thanks for your answer. I managed to get it to work without any helper functions:

  :items="items"
  item-value="[0]" 
  item-text="[1]"

Answer 3

If you're using Vue-select 3.0, using reduce will do the trick for you

const options = [{country: 'Canada', code: 'CA'},];

<!-- v2: using index --->
<v-select :options="options" label="country" index="code"  />

<!-- v3: using reduce --->
<v-select :options="options" label="country" :reduce="country 
=>country.code" />

You can find more information about the migration on their website .