load contents of array of objects into a vuetify combobox-CodePudding

I have this piece of code really confused me. I'm using typescript with vue (vuetify) and I'm still pretty new with typescript.

I have an array of objects that I want to load as items into a vuetify combobox.

Array =[
{ 
  subject: 'science', 
  difficulty: 'medium'
}
{  
  subject: 'math', 
  difficulty: 'hard'
}]

with having the subject as the one visible on the dropdown and the difficulty will the the value hidden behind the combobox

i know it needs to look like this

items: [
{ text: 'science', value: 'medium' },
{ text: 'math', value: 'hard' }];

so i can load it on the v-combobox like this

   <v-combobox :items="items" />

can anyone help me on how to achieve this? much appreciated!

CodePudding user response：

I did not understand your issue but a typical combobox should be look like this:
(define selectedItem as an empty array in your data and call this.selectedItem.text)

<v-combobox
      v-model="selectedItem"
      :items="items"
      item-value="value"
      item-text="text"
      :return-object="true"
      label="Select an item.."
      outlined
      clearable
    >
    </v-combobox>

CodePudding user response：

Yes for load the contents of array you set items props and also item-value et item-text props like @Aurora did. Because you an array of objects, and the component need to know what will be the value and the display field.