How to Geo Search with Vue Package?

I have implemented a working instance of InstantSearch using the Vue package. I would really like to add an additional search box to my search form that takes an Address then limits the results of the search to a 100 mile radius around the coordinates of that address. So far I have not figured out how to manipulate the searchStore of the ais-index instance.

I have tried setting within the mounted function to set queryParameters like this:
mounted() { this.queryParameters = { aroundLatLng: '47.6062,122.3321', aroundRadius: 100 }; }

I had also tried instantiating a separate searchStore component from vue-instantsearch like this, but could not get it to interact with ais-index:
import { createFromAlgoliaCredentials } from 'vue-instantsearch';
const searchStore = createFromAlgoliaCredentials('appId', 'apiKey');

Does anyone have an example or a tip?

Could you make a fiddle of what you tried already? Thanks!

I actually figured it out , but forgot to update this post. The solution was follows:

Bind input box to address:

<input type="text" v-model="address" class="ais-input" placeholder="Your address" />

Return address and searchStore from data:

return {
  //...
  address: '',
  searchStore: createFromAlgoliaCredentials('123456789','1111111111111111111111111111111111')
}

Return address from computed:

computed: {
  addressRef() { return this.address; }
},

Watch address:

watch: {
  'address': function () {
    var lat = DETERMINE LATITUDE HERE
    var lng = DETERMINE LONGITUDE HERE
    var latlng = lat + ',' + lng;
    this.searchStore.stop();
    this.searchStore.queryParameters = { aroundLatLng: latlng, aroundRadius: 1000 };
    this.searchStore.start();
    this.searchStore.refresh();
  }
}
1 Like