How to do a manual search when using typsense instantsearch with Vue

[robjbrain]

Description

I would like to do a manual search when clicking somewhere else on a page such as a button.

Steps to reproduce

The instructions given by algolia are to use:

searchClient.helper.setQuery('My Term').search();

Expected Behavior

I expect a search to be performed for "My Term"

Actual Behavior

I get the error Uncaught TypeError: Cannot read properties of undefined (reading 'setQuery')

This is because helper is null in the object returned from typesenseInstantsearchAdapter.searchClient

[jasonbosco]

To access the helper you want to use the searchFunction prop: https://www.algolia.com/doc/api-reference/widgets/instantsearch/vue/#widget-param-search-function

[robjbrain]

@jasonbosco i'm not sure how that helps without an example. It seems like you would need the helper to call the searchFunction method rather than accessing the helper via it?

I've found that you can use v-model however I can't find any reference to using v-model in the documentation for this adaptor or the original algolia package so i'm concerned it's not the right way to be going about things.

Here's an example:

<template>
   <button @click="getFooBar()">Get Foo Bar</button>
  <ais-instant-search index-name="nameOfIndex" :search-client="searchClient">
    <div class="right-panel">
      <ais-search-box v-model="searchTerm" />
      <ais-hits>
        <template v-slot:item="{ item }">
          <h2>{{ item.name }}</h2>
        </template>

      </ais-hits>
      <ais-pagination />
    </div>
  </ais-instant-search>
</template>


<script>
import TypesenseInstantSearchAdapter from "typesense-instantsearch-adapter";
import { ref } from 'vue'

const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
  ...
});

const searchClient = typesenseInstantsearchAdapter.searchClient;

export default {
  setup() {
    let getFooBar = () => {
      searchTerm.value = 'foobar'
    }

    let searchTerm = ref('')

    return {
      searchClient,
      getFooBar,
      searchTerm
    }
  }
};
</script>