Guides / Building Search UI / Troubleshooting

Vue InstantSearch FAQ

How to use float values in a numeric menu widget?

The numericMenu doesn’t support float values. We recommend storing an integer representation of this value in your records (e.g., 0.5 * 10 = 5) and display the original value in your UI.

How to search from the n-th character?

To search only when the query is longer than a certain length, you can implement a proxy search client. Then, you can add a condition (e.g., query.length > 3).

Why is my uiState ignored?

The uiState only works when the widgets responsible for each UI state attribute are mounted. For instance, a searchBox widget is necessary to provide a query.

Why is my uiState ignored?

The uiState passed to initialUiState or via routing needs to be nested per index. For example, if you only have a root index called “instant_search”, you should use a value like { instant_search: { query: 'query' } }.

How do I change the name of a key in routing?

If you want to change, for example, “query into “q” in routing, you need to use the stateMapping functions to:

  • first, in stateToRoute, return an object containing “q” for the query,
  • then, in routeToState, replace that “q” again with “query”.

How do I prevent infinite loops?

Our widgets accept arrays and objects as props. When you inline these directly in the template, it causes the widget to register again on every re-render, and, in some cases, can cause infinite loops. Instead, we recommend you keep track of those variables in data.

So, instead of this:

1
2
3
<template>
  <ais-hierarchical-menu :attributes="['lvl0', 'lvl1']" />
</template>

Write this:

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <ais-hierarchical-menu :attributes="attributes" />
</template>

<script>
export default {
  data() {
    return {
      attributes: ['lvl0', 'lvl1']
    }
  }
}
</script>

This is valid for all values which aren’t referentially equal: arrays, objects and functions.

Did you find this page helpful?