Vue Instantsearch distance filter

Hello.

I’m trying to build a distance filter using Vue Instantsearch. I already have the appropriate geo data on each of the records in my index. What I want to do now is add a filter where by a user can state that they wish to only see results within 100 miles of them (for example).

The aroundRadius query parameter seems to be just what I need but I can’t figure out how to manipulate that property from a custom Vue component.

https://www.algolia.com/doc/guides/searching/geo-search/?language=javascript#around-radius

What I have so far is:

this.searchStore.queryParameters.aroundRadius = value;

And while this doesn’t throw any errors, it doesn’t update the parameter either.

Complete component code is here:

Any help appreciated!

Thanks,
Ben

1 Like

Exciting component you have there @ben.sampson!

What does a record look like in Algolia? Does it have the necessary _geoloc attribute?

Are requests to Algolia fired?

Looking forward to solve this!

Thanks for the swift response!

Yes, the _geoloc attribute is populated and is working as expected. I’m using it for sorting by distance already and displaying distance on results, so I know that is working.

No requests are fired and I can see that the queryParameters property on the searchStore is not updated after trying to set it to a new value.

As an experiment, If instead of this.searchStore.queryParameters.aroundRadius = value; I do this.searchStore.query = "SomeValue"; then this does fire a request off to Algolia and does change the search query.

I thought perhaps there’s another way that I’m supposed to be setting the aroundRadius query parameter but I can’t see any other way to do it.

Ok, I think you just found a bug :confused:

Could you tell me what is the current version of the Algolia Helper.js? https://github.com/algolia/algoliasearch-helper-js/releases

If you are using 2.22.0, could you lock it to 2.21.2?

I was using 2.21.2 and have just updated everything to latest to see if that would help but to no avail :frowning:

I think this needs proper testing on our side. Please bear with me.

Thanks @rayrutjes. Please let me know if I can help in any way.

I think I found your issue.

Can you replace:

this.searchStore.queryParameters.aroundRadius = value;

with:

this.searchStore.queryParameters = { aroundRadius: value };
1 Like

The issue being that this.searchStore.queryParameters is a getter that returns a clone of the current state. Changing it won’t trigger anything.

However if you “set” the this.searchStore.queryParameters, it will smartly merge the query parameters with the existing ones.

1 Like

Brilliant! That’s sorted it. Thanks very much.

1 Like

Awesome, thank you for allowing some time to providing us the necessary information!