Cannot read property 'limit' of undefined"

[qrczak]

• vue-autosuggest version: 2.0.0
• node version: 11.10.1
• npm version: 6.9.0

<template>
  <div class="demo">
    <div v-if="selected" style="padding-top:10px; width: 100%;">
      You have selected <code>{{selected.name}}</code>
    </div>
    <div class="autosuggest-container">
      <vue-autosuggest
        v-model="query"
        :suggestions="suggestions"
        @focus="focusMe"
        @click="clickHandler"
        @input="onInputChange"
        @selected="onSelected"
        :sectionConfigs="sectionConfigs"
        :get-suggestion-value="getSuggestionValue"
        :input-props="{id:'autosuggest__input', placeholder:'Do you feel lucky, punk?'}">
        <div slot-scope="{suggestion}" style="display: flex; align-items: center;">
          <div style="{ display: 'flex', color: 'navyblue'}">{{suggestion.item.name}}</div>
        </div>
      </vue-autosuggest>
    </div>
  </div>
</template>

<script>

import { VueAutosuggest } from "vue-autosuggest";
import { mapGetters } from 'vuex'

export default {
  components: {
    VueAutosuggest
  },
  data() {
    return {
      query: '',
      selected: '',
      timeout: null
    };
  },
  computed: {
    ...mapGetters([
        'suggestions'
    ])
  },
  methods: {
    clickHandler(item) {
      
    },
    onSelected(item) {
      this.selected = item.item;
    },
    onInputChange(text) {
      let _this = this
      clearTimeout(this.timeout);

      this.timeout = setTimeout(function () {
          _this.$store.dispatch({
              type: 'getProducts',
              query: text
          })
      }, 500);
    },
    getSuggestionValue(suggestion) {
      return suggestion.item.name;
    },
    focusMe(e) {
      
    }
  }
}
</script>

What I did:
I try to change your demo from 'Advanced usage' section to my needs. And the demo without any modifications works fine. I want to get results via ajax and results will be stored in vuex store. So, in 'onInputChange' method I fire dispatch to action (with some delay so the dispath is not run after change of every character), and actions get data from server and send to vuex store and results are available in computed as 'suggestions' and it's connected to ':suggestions' props in 'vue-autosuggest' component. So far so good. In Dev tools in Chrome in Vue section I see after dispatch the store is updated - so results are available.

What happened:
No suggestion appears

Problem description:
After dispatch on console, I receive:

[Vue warn]: Error in render: "TypeError: Cannot read property 'limit' of undefined"

found in

---> <Autosuggest>
       <AddDoc> at resources/js/components/accountdocs/AddDoc.vue
         <Root>

I have no idea where is the problem.

[darrenjennings]

It appears your suggestions are of the wrong format. https://github.com/darrenjennings/vue-autosuggest#props

Suggestions to be rendered. e.g.suggestions: [{data: ['harry','ron','hermione']}]

Suggestions are arrays of section objects. Could probably use some better expected return value warnings. For instance, if [{data: null}], will throw the error you are describing.

Bad: ❌

return [{data: null}] // vue-autosuggest should maybe handle this for you and treat null same as [] 
return ['frodo', 'samwise']
return [{}]

Good ✅

return [{data: []}] // empty section
return [{data: ['frodo', 'samwise']}
return [] // empty everything
return [{name: 'hobbits', data: ['frodo', 'samwise']}, {name: 'humans', data: ['aragorn']}] // with sections: https://github.com/darrenjennings/vue-autosuggest#sectionconfigs

This reproduces your error:
https://codesandbox.io/s/httpsgithubcomdarrenjenningsvue-autosuggestissues124-7xt3p

[darrenjennings]

Leaving this open to handle null data

[FrankIversen]

Hi Darren

Thank you for providing this module.

I had the exact same problem as described above, until I found out by trail and error that the format was wrong. :)

[darrenjennings]

Fixed in 2.0.4