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

Question

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

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

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

<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);
    }
  }
});

Answer 1

在Vuetify 1.1.7中，组合框具有新功能，您可以参考。

其关于高级自定义选项。

Answer 2

遇到了同样的问题并解决了它，v-combobox它有点像这样v-autocomplete，您只需替换您的标签<v-combobox></v-combobox>或检查此处的文档： https: //vuetifyjs.com/en/components/combobox/#usage