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

Question

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>

score 2 · Answer 1 · answered Apr 05 '22 at 14:46

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>

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

1 Answers1