Correct way perform query programmatically?

[luaz]

I manage to perform query programmatically using the following code, was wondering is this the best way to do it? (especially trigger the search UI to popup)

this.fetchResults("singapore", "")
// need to call for the UI to popup
this.$refs.autocomplete.listeners.click()

The code is based on this sample: https://codesandbox.io/s/mjqrk7v2rx

<vue-autosuggest
    :suggestions="suggestions"
    :inputProps="inputProps"
    :sectionConfigs="sectionConfigs"
    :renderSuggestion="renderSuggestion"
    :getSuggestionValue="getSuggestionValue"
    @focus="focusMe"
    ref="autocomplete" />

export default {
  data() {
    return {
      inputProps: {
        id: "autosuggest__input",
        onInputChange: this.fetchResults,
        placeholder: 'Search places'
      }
    }
  }
}

[darrenjennings]

It would be better for vue-autosuggest to have a prop that controls this, as right now there is an internal state variable called "loading" that I'm using. Until then, you could override it's default value which is true in the mounted lifecycle:

mounted(){
    this.$refs.autocomplete.loading = false
    this.fetchResults('singapore')
}

Thanks for the feedback!

[scottadamsmith]

I am interested in this topic as well. I found today I had used the same approach of triggering a click event.

Regarding a potential enhancement, are suggesting a boolean prop that shows/hides suggestions and can be toggled from the outside? Originally I had though perhaps just exposing a method via ref would work, but the prop approach mitigates more $ref usage, which is ideal.

[darrenjennings]

@scottadamsmith IMO an even better enhancement would be to introduce the idea of a stateReducer. Taking inspiration from https://github.com/paypal/downshift#statereducer, we could give users ability to override data values without needing to use "control props".