Meilisearch - Vue instantsearch limit search to one index

Question

I've got a small problem here with meilisearch and vue-instantsearch.

I've got some models amongst which are a model called car-model and a model called manufacturer. The relation of manufacturer to car-model is 1:n.

Now, the manufacturer -model has a field called founder. So if I take for instance the company VW I add the name Ferry Porsche to the founder field for that Model.

When I'm searching my indizes with meilisearch now, and I'm entering Porsche into my search box, I'm getting Porsche as a result for manufacturers but I'm also getting VW because for some reason vue-instantsearch also displays hits in the founder-attribute of the manufacturer-model.

According to vue-instantsearchs documentation I can limit the attributes that are being searched like so:

<ais-index index-name="manufacturer">
            <ais-configure :attributes-to-retrieve="['manufacturer']"> <!-- <-- this should in theory limit the results to hits only in model-->
              <ais-hits>
                <template v-slot:item="{ item }">
                  <h3>
                    <ais-highlight :hit="item" attribute="name"/>
                  </h3>
                  <template v-if="item.logo">
                    <div class="hit-name__thumbnail">
                      <img :src="getImageUrl(item?.logo?.url)"
                           class="img-responsive search-box__results-manufacturer-logo"/>
                    </div>
                  </template>
                </template>
              </ais-hits>
            </ais-configure>
          </ais-index>

This however does not work and I'm still getting both VW and Porsche as a result for manufacturer in my results. Is there something I'm missing here?

Any help would be greatly appreciated,

greetz DeM

Answer 1

Thx, @CaroFG, this didn't solve my problem, however.

I got it working differently though, by using the meilisearch api directly and setting the searchable attributes on my model via a PUT request. The solution in the webstorm HTTP-Client for that looked something like this:

PUT http://localhost:7700/indexes/car-model/settings/searchable-attributes
Content-Type: application/json

[
  "name",
  "manufacturer.name" # since name is a nested attr on the related manufacturer entity
]

Greetz, derelektrischemoench

Answer 2

According to the configure widget documentation of vue-instantsearch :

the props have to use camel case since they’re directly forwarded to the Algolia API. In HTML or string templates, you can do this by adding .camel before the value of the prop.

So it should be:

<ais-configure :attributes-to-retrieve.camel="manufacturer"> <!-- or "['manufacturer']" -->