在 v-select 中输入自定义文本

Question

我的项目中有一个 v-select，其中包含一组项目，这些项目来自我的本地存储。我想要实现的是允许用户在 v-select 中输入一些数据（一些数据，我的存储或项目中不存在的数据），以及来自 v 项目的 selecting 数据-select 并允许他们保存它。我试图从@change 做到这一点，但我没有运气。有什么方法可以用 vuetify/vue 正确地做到这一点，或者我应该使用一些额外的库？这是我的 v-select

代码

           <v-select
          item-text="title"
          item-value="title"
          value="source.position"
          label="position"
          dense
          autocomplete
          :items="getPositions()"
          @change="jobPositionUpdate">
        </v-select>

提前致谢！

Answer 1

在我看来，您需要使用组合框。根据 Vuetify Website“使用 Combobox，您可以允许用户创建可能不存在于提供的项目列表中的新值。”

<v-combobox
   v-model="selected"
   item-text="title"
   item-value="title"
   value="source.position"
   label="position"
   dense
   :items="getPositions()"
   @change="jobPositionUpdate">
</v-combobox>

添加 v-model 有助于跟踪用户 selected and/or 添加到组合框的所有内容。

另一个提示是在 v-select 中使用自动完成已被弃用。 see。您可以使用 <v-autocomplete> 代替

在 v-select 中输入自定义文本

Input custom text into v-select

javascript

vue.js

vuejs2

vuetify.js