小编Max*_*xim的帖子

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

我在项目中使用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 || …
Run Code Online (Sandbox Code Playgroud)

vue.js vuetify.js

12
推荐指数
2
解决办法
1万
查看次数

标签 统计

vue.js ×1

vuetify.js ×1