Vue-select: Invalid prop: type check failed for prop "options". Expected Array, got Object.

Created on 13 Dec 2017 · 4Comments · Source: sagalbot/vue-select

I'm using VueJS 2 and Asp.net core 1.1 to develop my project. I make a vue select for search user via id, due to only search by id, it will only return single object for each time search. When I key in user id in that select field, I get this error 'Invalid prop: type check failed for prop "options". Expected Array, got Object.'

If i use

results: null instead of results: [] (this is v-model bind to options)

I will get another error ' Error in created hook: "TypeError: Cannot read property 'slice' of null"', how could i assign my results data to object or null to let my options can received object?

Another error is when on-search event is trigger, i use axios to fetch result from database, I assign the response.data to results array then console log the results array, it does store the value, but my options list does not updated.

Thanks in advance!

Source

shern91

Most helpful comment

For your first question, here is what i understand and giving solution on base of that.
<v-select :options="array" v-model="selected"></v-select>

data(){ 
return {
array:[],
selected: null
}
}

This should work perfectly fine.
And so your options list will be updated as it should.

IParthJoshi on 12 Jan 2018

❤1 👍1

All 4 comments

MarZab on 2 Jan 2018

👎15 😕1

For your first question, here is what i understand and giving solution on base of that.
<v-select :options="array" v-model="selected"></v-select>

data(){ 
return {
array:[],
selected: null
}
}

This should work perfectly fine.
And so your options list will be updated as it should.

IParthJoshi on 12 Jan 2018

❤1 👍1

I experienced the same thing
the error that i found was

[Vue warn]: Invalid prop: type check failed for prop "options". Expected Array, got String with value "".

my code

data() {
        return {
            form: new Form({
                komponen: [],
            })
        }
    }

in html

<v-select :options="form.komponen" label="text" index="value" @input="getAspek" v-model="form.komponen_id" placeholder="== Pilih Komponen == "></v-select>

When I first opened the page, there was no error
but when I submit the form using this.form.post() then the error appears

sorry for bad english