Vue中异步搜索数据仅点击后才显示的问题求助

先帮你拆解下问题的核心原因，再给出针对性的修复方案：

核心原因：@change 事件的触发时机不符合预期 #

你绑定的 @change 事件，在Framework7的Searchbar组件（以及大多数原生表单输入组件）中，默认是在输入框失去焦点时才会触发，而非输入内容实时触发。这就解释了为什么输入时结果没更新——因为此时@change还没执行；而点击表格区域时，Searchbar失去焦点，触发了@change事件，搜索方法才被调用，结果才显示出来。

另外你的异步代码虽能运行，但存在小隐患：第一个then回调给vals赋值，第二个then依赖这个变量，万一查询出现异常，可能导致vals未定义不过这不是当前问题的主因。

修复方案 #

1. 替换事件为实时触发的@input #

把@change="handleSearch"改成@input="handleSearch"，这样每次输入框内容变化时都会立即调用搜索方法，实现结果同步更新：

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

2. 优化异步代码（可选但推荐） #

用async/await重构handleSearch方法，让代码更清晰易读，同时避免变量作用域的潜在问题：

async handleSearch() {
  try {
    const res = await db.query('categories/search', {reduce: false});
    console.log(`${res.rows[0].key} is the result of searched`);
    this.searchResults = res.rows.map(row => row.key.metadata);
  } catch (err) {
    // 处理查询异常，比如提示用户搜索失败
    console.error('Search failed:', err);
  }
}

3. 修正表格HTML结构（可选） #

你的表格结构不符合HTML规范：<tr>标签内直接放置<span>是错误写法，应该用<td>包裹内容，否则可能引发样式或渲染异常：

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

验证效果 #

修改完成后，输入内容时应该会立即触发搜索，表格结果也会同步更新，不需要再点击其他区域了。

内容的提问来源于stack exchange，提问作者David J.