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

【问题标题】：v-autocomplete and setting user input as its valuev-autocomplete 并将用户输入设置为其值
【发布时间】：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>

标签： vue.js vuetify.js

【解决方案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

【讨论】：