v-select / Vue: как ввести значение, которого нет в списке?

Question

Я пытаюсь найти способ добавить новое значение, используя v-select, которого ранее не было в списке.Так что новое введенное значение станет выбранной опцией.

Это мой текущий код:

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

В пользовательском интерфейсе компонент выглядит следующим образом.Здесь я использую Vuex только для получения :options.В настоящее время, если я ввожу новое значение и щелкаю за пределами этого значения, оно исчезает, так как оно не найдено в списке

Ожидается: хотелось бы ввести новое значениеи используйте это значение как текущее в форме и сохраните его.Есть ли способ достичь этого?

Буду признателен за любую помощь.
Спасибо!

Answer 1

Если вы используете vue select, вы можете использовать атрибут taggable и множественный, чтобы указать свои собственные параметры:

<v-select taggable multiple />

См. Эту ссылку:

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