设置带有搜索功能的 v-autocomplete

Question

尝试设置 v-autocomplete，没有观察者，流程将是：

1. 输入一个字符串，值被函数接受
2. 函数在 api 中搜索字符串并返回一个列表
3. 列表被放入“条目”中
4. 重新评估计算属性“tagsFound”。
5. 显示“tagsFound”（因为它们是）这里的:items文档和我的代码之间的主要区别是我尝试在没有观察者的情况下而不是使用简单的函数来执行此操作。相关代码：

<v-autocomplete
          v-model="newTag"
          :items="tagsFound"
          :loading="loading"
          :search-input.sync="search"
          color="white"
          hide-no-data
          hide-selected
          :placeholder="$t('search_terms.new_tag')"
        ></v-autocomplete>
    ...
    data() {
      return {
        newTag: '',
        entries: [],
    ....
    methods: {
    ...
     async search(term){
        this.query.term = term
        this.entries = await this.searchTerms(this.query)
      },
    ...
    computed: {
      tagsFound(){
        return this.entries
      }
    }

预期行为是搜索键入的术语并将结果显示为下拉列表。 实际行为是它不搜索，因此不显示任何内容。

Answer 1

修饰符sync有效地使 prop 的行为类似于v-model，所以就像v-model有一个 prop 和一个事件一样。该值必须是属性，而不是方法，因此如果是方法:search-input.sync="search"则没有意义。search

您的示例中的计算tagsFound属性并没有真正执行任何操作。如果您只是要返回，entries不妨entries直接在模板中使用。

不知道为什么你想要在没有 a 的情况下执行此操作watch，但可以通过拆分search-input.sync为 prop/event 对或使用带有 getter 和 setter 的计算属性来完成。下面的示例使用后一种方法。

function fakeServer (search) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([
        'Red', 'Yellow', 'Green', 'Brown', 'Blue', 'Pink', 'Black'
      ].filter(c => c.toLowerCase().includes(search.toLowerCase())))
    }, 1000)
  }) 
}

new Vue({
  el: '#app',

  data () {
    return {
      newTag: '',
      entries: [],
      queryTerm: ''
    }
  },

  computed: {
    search: {
      get () {
        return this.queryTerm
      },
      
      set (searchInput) {
        if (this.queryTerm !== searchInput) {
          this.queryTerm = searchInput
          this.loadEntries()
        }
      }
    }
  },
  
  created () {
    this.loadEntries()
  },

  methods: {
    async loadEntries () {
      this.entries = await fakeServer(this.queryTerm || '')
    }
  }
})

<link href="https://unpkg.com/vuetify@1.5.16/dist/vuetify.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@1.5.16/dist/vuetify.js"></script>
<div id="app">
  <v-app>
    <v-autocomplete
      v-model="newTag"
      :items="entries"
      :search-input.sync="search"
    ></v-autocomplete>
  </v-app>
</div>