Vue instant search - facet filters

Hi,

I am trying to filter my results by facet and haven’t found a way to make it work. Is someone able to provide a code example on how to set up the facetFilters?

My code (that is not working):

    <ais-index
          index-name="indexName"
          :search-store="searchStore"
          :query="query"
          :auto-search="false"
          :query-parameters="queryParameters"
  >

On the script side - I have my query parameters object - Vue Devtools tells me that it is updating as expected (when I apply the filter to from my select state dropdown):

      queryParameters: {
        facetFilters: []
      }

As a test, I also did this call on the ‘mounted’ hook to make sure things are working on my Algolia account’s side plus that my facet filter string(s) are correct.

  mounted() {
    index.search({
      facetFilters: "state:WA",
      query: 'kim ben'
    }, function(err, content) {
      console.log(content.hits)
    });
  }

The above works perfectly - console logging results by state (and a different state if I change the hardcoded value in there).

I believe I must be messing up the way my query parameter object is - can anyone help/give an example?

Thanks in advance!

Hey, this seems pretty interesting, I’m just wondering what you actually want to achieve. Could it be done with <ais-refinement-list /> maybe?

Possibly…

I’m basically just trying to incorporate filtering (i.e. states in Australia, so not too many facets) with the component here: http://element.eleme.io/#/en-US/component/select

So I basically need to either mix instantsearch into the component (what I’m trying and failing to do), OR, use the refinement plugin and write my styling from scratch. For long-term reusability, I think understanding how to customise instantsearch will be more beneficial and faster.

Thoughts?

Also, I am curious as to how things work :nerd_face: and it’s bugging me that it isn’t working! :smile:

Anyone? Would love to get this working and out there!

Hi @hemal,

I would say you have two ways to approach this:

If you could try one of those out and share the resulting attempt here, that’d be awesome!

Let us know if anything is missing,

Cheers,