0

我正在尝试在网站中使用 vue 实现 algolia，并且它在大多数情况下都可以正常工作，但是每次我尝试使用自定义input字段执行搜索时，每次击键都会触发两次，这会导致我们的搜索操作在每次使用时加倍在网站上。

例如，有问题的代码如下所示：

HTML

<div id="instant-search">
  <div class="main container instant-search">
    <ais-instant-search :query="query" :search-client="algoliaClient" index-name="instant_search">
      <ais-configure :query="query" :hits-per-page.camel="21" :min-word-sizefor-1-typo.camel="6"></ais-configure>
      <ais-search-box></ais-search-box>
      <input v-model="query" />
      <ais-hits></ais-hits>
  </div>
</div>

JS

var vm = new Vue({
      el: '#instant-search',
      data: function() {
        return {
          algoliaClient: algoliasearch(
            'ALGOLIA_APP_ID',
            'ALGOLIA_API_KEY'
          ),
          query: '',
        };
      },
});

如果您打开“网络”选项卡并尝试在该<input v-model="query" />字段中输入，您将看到 2 个请求发送到 Algolia，但是在该 <ais-search-box>字段中执行相同操作会显示每个预期按键的单个请求。

有没有办法在ais-search-box我的输入字段中实现相同的行为？我不能在我们的网站中使用这个字段的原因是因为我们网站中的搜索字段在 vue 实例之外，我必须vm.query = 'query'在输入这个字段时设置查询。这是一个没有帮助的旧网站，我的选择非常有限。

这是使用 Algolia 的测试凭据的 codepen 中的相同示例：https ://codepen.io/javier_ml/pen/RwNzWRZ

4

0 回答 0