CODEWITHSUNDEEP
vue.jsv-select
user10368959
user10368959

Reputation: 153

v-select/Vue: How to enter value not in the list?

I'm trying to find a way to add a new value using v-select previously not in the list. So that the new value entered will become the selected option.

This is my current code:

        <v-select
          ref="systemSelect"
          v-model="reservation.system"
          name="system"
          label="Select System"
          :disabled="isBusy"
          :options="systems"
          @input="getSystems"
        />

In UI the component looks like this. Here I use Vuex only to get :options. Currently if I enter a new value and click outside that value disappears since its not found in the list

enter image description here

Expected: Would like to enter a new value and use this value as current in the form and save it. Is there a way to achieve this?

Any help would be appreciated.
Thanks!

Upvotes: 3

Views: 5042

Answers (1)

Eduardo Hernandez
Eduardo Hernandez

Reputation: 533

If you're using vue select, you can use the attribute taggable and multiple to push your own options:

<v-select taggable multiple />

See this link:

https://vue-select.org/guide/values.html#tagging

Upvotes: 4

Related Questions