Vue-select: [Vue warn]: Error in created hook: "TypeError: Cannot read property 'slice' of null"

[NexoraSolutions]

Hi there,

I'm getting this error adding de vue-select in my Laravel project.

The demo select works perfectly but when I try to make it an ajax remote selector I get the following error in the Chrome console:
Not sure where is the problem, so I'll post here the code:

My JS Component:

<template>
  <v-select :debounce="250" 
            :options="options" 
            :on-search="getOptions" 
            placeholder="Busca tu instalación"
            label="full_name">
  </v-select>
</template>

```js
import vSelect from "vue-select"

export default {
components: { vSelect },

data() {
  return {
    repo: null,
    error: null,
    options: null
  }
},
methods: {
  getOptions(search, loading) {
    loading(true)
    this.$http.get('http://mylocal.app/api/instalaciones-names', { q: search })
      .then(resp => {
        this.options = resp.data.items
        loading(false)
      })
      .catch(err => {
        this.error = err.data
        loading(false)
      })
  }
}

}

In the app.js
```js
Vue.component(
    'selector',
    require('./components/selector.vue')
);

So in the the blade file I just have <selector></selector>

The "selector", aparently is the vue-select (with his placeholder, his search box and the "No matching options" message.

The API call (http://mylocal.app/api/instalaciones-names') works fine in my local environment so this is not the problem I guess. I verified it with postman.

I get this error when loading the page. When I use the select I just get the "no matching options" message.

I would appreciate any help.

Thanks!

[yifei2016]

+1

[ghost]

I've met same issue. And I got a solution.

In sample code snippet,

data() {
    return {
        options: null
    }
},

options: null --> [] (empty array)

options should be an Array to prevent 'slice' error

Hope it will be help you.

[sagalbot]

Are you using the development version of vue? If you are, you should be seeing prop validation errors in the console.

From the component:

/**
  * An array of strings or objects to be used as dropdown choices.
  * If you are using an array of objects, vue-select will look for
  * a `label` key (ex. [{label: 'This is Foo', value: 'foo'}]). A
  * custom label key can be set with the `label` prop.
  * @type {Object}
  */
options: {
  type: Array,
  default() {
    return []
  },
},

options is required to be an array. If you need to set a falsey/null value, use an empty array [].