如何使用 Vue InstantSearch 设置初始搜索的属性？答案

【问题标题】：How to set properties of the initial search with Vue InstantSearch?如何使用 Vue InstantSearch 设置初始搜索的属性？
【发布时间】：2018-11-28 23:53:10
【问题描述】：

我正在使用 Algolia 提供的 Vue 组件来搜索我的索引。

https://v2--vue-instantsearch.netlify.com/getting-started/getting-started.html

搜索工作正常，但我想知道如何设置初始值，比如我在页面加载时拥有的优化列表。

我这样设置搜索：

<script>
import algoliasearch from 'algoliasearch/lite'

export default {
  name: 'Home',
  data () {
    return {
      searchClient: algoliasearch(
        'APPID',
        'API-KEY'
      )
    }
  }
}
</script>

...我有一个这样的细化列表（为简洁起见，删掉了很多代码）：

<ais-instant-search
  :search-client="searchClient"
  index-name="properties"
>
  <ais-refinement-list
    attribute="borough"
    :sortBy="['name:asc']"
  />
</ais-instant-search>

一进入页面，优化列表的所有复选框都是空白的...我想知道如何为我喜欢的查询设置一些初始值/组合。

甚至可以使用这些组件吗？我已经非常广泛地浏览了这些文档，但我不确定我是否能看到任何详细说明。也许我在搜索错误的术语。

帮助表示赞赏。谢谢。

【问题讨论】：

看看this，如果不分叉组件似乎是不可能的。

标签： javascript vue.js algolia

【解决方案1】：

您有两种获取方式：

将ais-searcher routing的默认值设置为：

...

routeToState: (routeState) => {
  if(!routeState.foo) {
    routeState.foo = this.bar
  }
  ...

在您的细化组件中使用ref 并执行其方法：

// in template
<ais-refinement-list
  attribute="foo"
  ref="fooRefinement" />

// In Script

...
mounted() {
  this.$refs.fooRefinement.refine('bar')
}

最后，你应该使用 promises 或 setInterval 等待方法。

【讨论】：