Question

在没有观察者的情况下尝试设置v-autocomplete，流程将是：

键入一个字符串，值将被函数接受
函数在api上搜索字符串并返回列表
列表被放入“条目”
重新评估计算出的属性“ tagsFound”。
“ tagsFound”（因为它们是:items） here文档和我的代码之间的主要区别在于，我试图在没有观察者的情况下尝试使用简单的功能来执行此操作。相关代码：

<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

在这一部分中，您将<'h2'>Main Course Title<'/h2'> <'h3'>Course Contents - DAY 1<'/h3'> <'h4'>Session 1: Introduction<'/h4'> A brief history of UNIX The UNIX kernel <'h4'>Session 2: Another intro<'/h4'> A brief history of UNIX The UNIX kernel绑定到sprite.rect.x = ((round(sprite.rect.x/gridSquareSize))*gridSquareSize) sprite.rect.y = ((round(sprite.rect.y/gridSquareSize))*gridSquareSize)方法上，这是错误的。您需要将search-input绑定到数据字段并对其进行监视。

async

如下定义您的组件：

search-input

和v-autocomplete模板：

<v-autocomplete
          :search-input.sync="search"
></v-autocomplete>

This is a working example是我在CodePen上创建的

Answer 2

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

示例中的tagsFound计算属性实际上没有做任何事情。如果您只想返回entries，则最好直接在模板中使用entries。

不确定是否要在没有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>

使用搜索功能设置v自动完成

2 个答案: