为什么我的异步检索的数据只有在我点击后才出现（Vue）答案

【问题标题】：Why are my asynchronously retrieved data only appearing after I click (Vue)为什么我的异步检索的数据只有在我点击后才出现（Vue）
【发布时间】：2018-01-26 08:01:58
【问题描述】：

我有一个 @change 事件的输入：

        <f7-searchbar
        :clear-button="true"
        @focus="showFilters=true"
        @blur="showFilters=false"
        v-model="searchText"
        @change="handleSearch"
        >

这是为了从数据库中获取搜索结果并将它们显示在表格中。

获取结果的方法：

 handleSearch: function(){
     var preResults = []
     var postResults         
     var self=this
     var vals
     db.query('categories/search', {reduce: false}).then(function (res) {
     console.log(res['rows'][0]['key'] + ' is the result of searched')       
     vals = res['rows']
     }).then(function(){
     self.searchResults = vals.map(row => {
         return row['key']['metadata']
     })

     })
 },

应在此表中显示的内容：

            <table>
                <tr v-for="entry in searchResults" class="popup-trigger" style="text-align: left;">
                       <span>{{ entry }}</span>
                </tr>                   
            </table>

我希望这些结果会在 searchText 更改时更新。但这不会发生。只有在我在搜索中输入内容后才会显示结果，然后单击应该显示表格的位置。我不知道为什么点击应该更新它。谁能帮我理解这个？

【问题讨论】：

标签： asynchronous vue.js promise

【解决方案1】：

你应该使用 @input 事件而不是 @change 事件

另外我的建议是不要为每个字符发送请求，例如如果你想搜索 apple，然后快速输入：

a - send request
p - send request
p - send request
l - send request
e - send request

您可以使用计时器来检查用户是否停止输入

<input @input="userStopTyping" 

  userStopTyping () {
    if (this.timer) {
      clearTimeout(this.timer)
    }

    this.timer = setTimeout(this.yourFunction, 200)
  }

所以如果你输入 fast apple，你只会发送一个请求。

【讨论】：