v-autocomplete 并将用户输入设置为其值

Posted 2023-02-22

【中文标题】v-autocomplete 并将用户输入设置为其值

【英文标题】：v-autocomplete and setting user input as its value

【发布时间】：2018-12-30 11:12:24

【问题描述】：

我在我的项目中使用vuetify 并且需要预先输入组件。遗憾的是，v-autocomplete 实现为带有过滤器的组合框，因此它不允许将用户输入设置为 v-model（或者至少我找不到这样做的方法）。

有人可以解释一下如何实现这样的功能（可能是通过另一个 vuetify 组件）？我从服务器加载项目，但它们只是作为建议。用户需要能够键入和设置他们想要的任何值。

这是一个基本示例https://codepen.io/miklever/pen/oMZxzZ。问题是，如果我输入任何不以“John”开头的单词，v-autocomplete 会在模糊时清除它。我尝试手动设置 v-model 并将用户输入添加到数组中，但是这些方法中的任何一个都有问题并且无法按预期工作。

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <p>Name:  select || 'unknown'</>
        <v-autocomplete
          :items="items"
          :search-input.sync="search"
          v-model="select"
          cache-items
          flat
          hide-no-data
          label="Name"
        ></v-autocomplete>
      </v-container>
    </v-content>
  </v-app>
</div>

new Vue(
  el: "#app",
  data: () => (
    items: [],
    search: null,
    select: null,
    commonNames: ["John", "John2", "John3"]
  ),
  watch: 
    search(val) 
      val && val !== this.select && this.querySelections(val);
    
  ,
  methods: 
    querySelections(v) 
      setTimeout(() => 
        this.items = this.commonNames.filter(e => 
          return (e || "").toLowerCase().indexOf((v || "").toLowerCase()) > -1;
        );
      , 500);
    
  
);

【问题讨论】：

您使用的是什么 Vuetify 版本？因为 1.1.7 有这样的新功能。请检查组合框Advanced custom options

哇，他们绝对应该将 v-combobox 重命名为 v-autocomlete，反之亦然，因为这是预输入功能。谢谢@gil 看来这正是我正在寻找的。​​span>

【参考方案1】：

在 Vuetify 1.1.7 Combobox 中有新功能，您可以参考。

它在 Advance custom options 上。

【参考方案2】：

遇到同样的问题并用v-combobox 解决了它，它有点像v-autocomplete 所以，你可以用<v-combobox></v-combobox> 替换你的标签或查看这里的文档：https://vuetifyjs.com/en/components/combobox/#usage