Question

我正在使用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>

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

甚至可以使用这些组件吗？我已经对文档进行了广泛的研究，但是我不确定是否可以看到任何详细信息。也许我在搜索错误的术语。

帮助表示赞赏。谢谢。

Answer 1

您有2种获取方式：

将默认值en 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')
}

最后，您应该使用promise或setInterval来等待方法。

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

1 个答案: