vie-autosuggest props incorrect

[mhimi1]

Hi,

The docs show the following example code for vue-autosuggest:

<vue-autosuggest
:suggestions="indicesToSuggestions(indices)"
@selected="onSelect"
:input-props="{
style: 'width: 100%',
onInputChange: refine,
placeholder: 'Search here…',
}"

This does not seem to trigger 'refine'.

@input event does seem to trigger 'refine', as followed:

<ais-autocomplete>
          <template slot-scope="{ currentRefinement, indices, refine }">
            <vue-autosuggest
              :value="currentRefinement"
              :suggestions="indicesToSuggestions(indices)"
              @selected="onSelect"
              @input="refine"
              :input-props="inputProps"
            >
              <template slot-scope="{ suggestion }">
                <ais-highlight
                  :hit="suggestion.item"
                  attribute="name"
                  v-if="suggestion.item.name"
                />
                <strong>$ {{ suggestion.item.price }}</strong>
                <img :src="suggestion.item.image" />
              </template>
            </vue-autosuggest>
          </template>
        </ais-autocomplete>

[Haroenv]

interesting, this might be something they have changed across a major version.

It would be useful to show exactly what you suggest to change here: https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/Vue%20InstantSearch/multi-index-autocomplete

Thanks!

[mhimi1]

For some reason, I get a 403 error when trying to access the sandbox, but the change I would suggest is moving the input change event out of the inputProps and instead use the @input event directly.

so instead of

:input-props="{
style: 'width: 100%',
onInputChange: refine,
placeholder: 'Search here…',
}"

using:

@input="refine"

[biancajemsten]

I'm having the same issue using onInputChange: refine , but your solution worked for me @mhimi1 ! Thanks :)

[mhimi1]

Welcome @biancajemsten. Glad it helped you.