load contents of array of objects into a vuetify combobox

Question

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!

Answer 1

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>