vue.js - v-选择/Vue : How to enter value not in the list?

标签 vue.js v-select

我正在尝试找到一种方法来使用以前不在列表中的 v-select 添加新值。这样输入的新值就会成为选中的选项。

这是我当前的代码:

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

在 UI 中,组件如下所示。这里我只使用 Vuex 来获取 :options。目前,如果我输入一个新值并在外部单击,该值就会消失,因为它在列表中找不到

enter image description here

预期:想要输入一个新值并将此值用作表单中的当前值并保存。有办法实现吗?

如有任何帮助,我们将不胜感激。
谢谢!

最佳答案

如果您使用的是 vue select,则可以使用 taggable 和 multiple 属性来推送您自己的选项:

<v-select taggable multiple />

查看此链接:

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

关于vue.js - v-选择/Vue : How to enter value not in the list?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56549184/

相关文章:

javascript - 带 Jest 的 vue-test-utils 为 map-spread 运算符抛出意外的 token 错误

vue.js - Vue 将字符串转换为 dom (Nuxt.js)

Vue.js:设置计算属性时出错

firebase - Vuexfire 将 Firestore 集合绑定(bind)到对象而不是列表

javascript - 如何使用方法更改选定的 v-select 项?

javascript - 在范围内使用 validateAll() 和自定义 v-select 标记

vue.js - v-select vuetify 最大元素数

javascript - 如何修复 'npm run build'后的空白网页

javascript - 引导表中的 vue v-select

vue.js - 如何使附加项目在 v-select vuetify 中始终可见