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

Question

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

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!

no. My bad...should've mentioned I'm using v-select with bootstrap-vue — user10368959, Jun 11 '19 at 18:05
just curious is there a way to do this using vuetify? If so maybe i can use a similar approach in my code — user10368959, Jun 11 '19 at 18:24
@StevenSpungin This probably would've worked but as mentioned i'm using bootstrap-vue here. anyway thanks for the suggestion — user10368959, Jun 12 '19 at 17:41

score 4 · Answer 1 · answered Jun 12 '19 at 23:01

4

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

answered Jun 12 '19 at 23:01

Eduardo Hernandez

483
3
13

This does not work as using `multiple` creates a list instead of selecting a single value. Thanks for the suggestion tho – user10368959 Jun 18 '19 at 23:26
ended up using Bootstrap-vue's datalist component instead which allows this – user10368959 Jun 18 '19 at 23:27
3

FYI - you don't have to use `multiple` with `taggable` - I successfully set up a single-select that allowed unmatched user entries (also using the remote options w/ infinite scroll). – user9645 Aug 10 '21 at 14:46

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

1 Answers1