CODEWITHSUNDEEP
vuetify.jsv-select
Simao
Simao

Reputation: 581

How to add extra option to v-select after setting :items prop

I have a v-select, written like this :

                <v-select
                    ref="v_select_folder"
                    dense
                    hide-details
                    v-model="selectedPlanFolder"
                    label="PlanFolder"
                    :items="PlannedFolder"
                    item-text="node.name"
                    return-object
                    @change="setFolderNameAndID"
                >

The v-select gets the available options/values dropdown from :items, I would like to know how if there is a simple way I can add an extra aditional option , without touching the items prop. Something like :

                <v-select
                    ref="v_select_folder"
                    dense
                    hide-details
                    v-model="selectedPlanFolder"
                    label="PlanFolder"
                    :items="PlannedFolder"
                    item-text="node.name"
                    return-object
                    @change="setFolderNameAndID"
                > 
                  <option>This is another select value</option>

                </v-select>

Upvotes: 2

Views: 2173

Answers (2)

bar5um
bar5um

Reputation: 912

In my situation I had to add a button to the end of items. I did this with append-item slot.

<v-select
  ref="v_select_folder"
  dense
  hide-details
  v-model="selectedPlanFolder"
  label="PlanFolder"
  :items="PlannedFolder"
  item-text="node.name"
  return-object
  @change="setFolderNameAndID"
>
     <template v-slot:append-item>
                      HELLO! I AM SOMETHING MORE!
     </template>
</v-select>

Source: v-select API — Vuetify

Upvotes: 0

Jay Fridge
Jay Fridge

Reputation: 1057

You can create a new array in place with the spread operator and add an item to it. You may want to add additional properties to the added item depending on how you process your data.

<v-select
  ref="v_select_folder"
  dense
  hide-details
  v-model="selectedPlanFolder"
  label="PlanFolder"
  :items="[...PlannedFolder, { node: { name: 'name' } }]"
  item-text="node.name"
  return-object
  @change="setFolderNameAndID"
>
</v-select>

Upvotes: 2

Related Questions