Customizing the initial search parameters in Vue InstantSearch: A step-by-step guide

I am utilizing the Vue components from Algolia to perform a search on my index.

The search functionality is working correctly, but I am curious about setting the initial values for the refinement list upon page load.

This is how I have set up the search:

<script>
import algoliasearch from 'algoliasearch/lite'

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

...and here is an example of the refinement list (with code cut out for brevity):

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

Upon landing on the page, all checkboxes in the refinement list are empty. I would like to know how to set some initial values or combinations for a specific query.

Is it even possible with these components? I have extensively reviewed the documentation but couldn't find any information regarding this feature. Perhaps I am using incorrect search terms.

Your help is greatly appreciated. Thank you.

Answer №1

There are two methods to obtain it:

  1. Set the default value in the ais-searcher routing, like this:
...

routeToState: (routeState) => {
  if(!routeState.foo) {
    routeState.foo = this.bar
  }
  ...
  1. Utilize a ref in your refine components and utilize its methods:
// in template
<ais-refinement-list
  attribute="foo"
  ref="fooRefinement" />

// In Script

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

In the latter option, you may need to use promises or setInterval to wait for the method.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Analyzing the value of a tab with Protractor测试

Below is my HTML code showcasing a list of tabs: <mat-tab-group> <mat-tab label="A"> <app-A></app-A> </mat-tab> <mat-tab label="B"> <app-B></app-B> </mat ...

Learn the process of retrieving JSON objects through AJAX using jQuery

When making a jQuery call to an API website, I receive the results in JSON format: { "results":[ { "user":{ "gender":"female", "name":{ "title":"mrs", "first":"linda", "last":"diaz" }, ...

The functionality of the String prototype is operational in web browsers, but it encounters issues

Version: 8.1.0 The prototype I am working with is as follows: String.prototype.toSlug = function () { return (<string>this) .trim() .toLowerCase() .replace(/\s+/g, '-') .replace(/[^\w\-]+/g, '') ...

How can I prevent my copy variable from altering the original value variable in Node.js?

Why is it that when I change a variable that is a copy of another variable, both are affected? This concept doesn't seem logical to me. Can you please explain why this happens? It's my first time encountering this behavior in node.js. I am famili ...

Tips for implementing dynamic and interchangeable nested routes within Nuxt JS

In order to implement dynamic routing, the documentation suggests nesting folders with names starting with _paramname. This way, Nuxt will automatically generate routes for these dynamic subfolders. However, I am struggling to understand how to structure m ...

Trouble with image click event in jQuery/JavaScript

I am having trouble with my HTML and JS code. I have added images to my HTML page and want to make it so that when the image is clicked, an alert box pops up. However, for some reason, my JavaScript isn't working as expected. Here is a snippet of my ...

What are the steps to send $http requests from AngularJS to a local server in an app?

Situation at Hand My goal is to perform an $http post request from Angular using the function below, defined in my controller: $scope.sendUserData = function(){ var userData = JSON.stringify({ 'firstName': $scope.firstName, ...

Retrieving information from a JSON file and dynamically displaying it on an HTML page using JavaScript

I've been working on pulling data from a JSON file to display on my website. Following this helpful guide at: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON, but unfortunately, I'm facing an issue where nothing is showing ...

React does not trigger a re-render when dynamically generated buttons are created

I am encountering an issue with displaying social media buttons on my website. I have implemented a tweet button and a Facebook like button to appear on every page, but they only load correctly on the initial page visit. Upon navigating to another page and ...

The validation function for email addresses in Express-validator seems to be malfunctioning

I've encountered an issue with the validation process in my code. Everything seems to be working fine except for the .isEmail method, which keeps flagging even valid email addresses as invalid. No matter how I adjust the validation rules, the problem ...

Hiding labels using JQuery cannot be concealed

Why isn't this working? -_- The alert is showing, but nothing else happens. <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeaderContent"> <script type="text/javascript"> if (navigator.userA ...

The tab element is not receiving a click event in Protractor

This is the complete HTML code for the Tab section. <tab heading="Meta Data" id="heading_meta-data"> <div id="meta-data" class="row"> <div class="col-md-3 col-xs-3"> ...

Error encountered with MobileFirst version 8 and Angular JS v1.5.3 integration using Bootstrap

I am encountering an issue with my Cordova application that integrates with MobileFirst Platform version 8, Ionic version 1.3.1, and AngularJS version 1.5.3. Upon bootstrapping AngularJS to connect the app to MobileFirst Platform, I encounter the following ...

What's the best way to link two http requests in AngularJS?

Currently, I am facing the challenge of chaining two http calls together. The first call retrieves a set of records, and then I need to fetch finance data for each individual record. flightRecordService.query().$promise.then(function (flightRecords) { $ ...

Retrieve data from two separate files and store it as a two-dimensional array in JavaScript

Is there a way to read and convert two .txt files into a 2d array? I currently have a code snippet that looks like this : var fs = require('fs') file = './text1.txt' fs.readFile(file,'utf-8', (e,d) => { textByLine = d.s ...

Ensuring secure authentication in your Vue.js application using Vue router and Django

When it comes to checking if a user is authenticated on protected routes in vue-router, I have a setup using Django rest framework that sets sessionid upon login. While some users opt to use vuex or local storage to store session information, there's ...

Adding a custom class to the body element for specific routes in Next.js can be achieved by utilizing the features of

I am looking to apply my custom class to certain pages, with the exception of specific routes. For example, all pages should have the class fixed-header, except for the following routes: /cart/step-1 /login This class should be added or removed from the ...

What is the best way to add a picture using React and Next.js?

Being a novice in React and Next, I recently embarked on a project that involves uploading a profile picture. However, every time I try to upload an image, an error pops up. Error: The src prop (http://localhost:3333/files/ SOME IMAGE.jpg) is invalid on n ...

Installing libraries using npm can be done in two ways: using the command `npm install`

While working, we encountered an issue where the icon for the menu block from the rc-menu library was not displaying. Every time we run mvn install We also run npm install In our package.json file, we had included this library "rc-menu":"^5.1 ...

The PDF file appeared blank after receiving a response from the API using Node.js

When I call a REST API that returns a PDF file, the document appears blank when opened. The console indicates that the data may be corrupted. let url ="API-URL"; var options = { 'method': 'GET', 'url': url ...