Question

我的项目中有一个v-select，包含一组来自本地存储的项目。我想要实现的是允许用户在v-select（一些数据，我的存储或项目中不存在的内容）中输入一些数据，以及从v-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

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

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

添加v模型有助于跟踪用户已选择和/或添加到组合框的所有内容。

另一个提示是，不建议在v-select中使用自动完成功能。 Vuetify Website。您可以改用<v-autocomplete>

将自定义文本输入到v-select中

1 个答案: