Using object as Vue Select options

Question

I know, Vue Select docs specify that options should be an array, but is there a way around it? I want to use object keys as values and object values as labels.

My data:

obj: {
   value: 'en',
   options: {
     'ar': 'Arabic',
     'ast': 'Asturian',
     'en':' English'
   }
}

 <v-select                                       
       v-model="obj.value"
       :options="Object.keys(obj.options)"                                 
>

I know i can use keys as options that way, but I have no idea how to use values as labels. Any tips?

Yes, I want to use keys, as actual selected values. I just want to hide them under labels — MeeraWeeks, Sep 03 '20 at 11:53

score 0 · Answer 1 · answered Sep 03 '20 at 15:02

There are multiple ways you could do that but one options is:

<v-select v-model="obj.value" :options="obj.options" :reduce="val => val.code"/>

Only change to your data should be that the obj.options should look like below:

obj: {
    value: "en",
    options: [
      { label: "Arabic", code: "ar" },
      { label: "Asturian", code: "ast" },
      { label: "English", code: "en" }
    ]
  }

Relevant documentation transforming-selections

Using object as Vue Select options

1 Answers1