Vue-select is not working in vue project!! the solution is here.

There is a package named vue-select. it syncs the chosen value with the parent component. vue-select uses v-model syntax to sync value.

A common mistake that makes our life miserable.

in the documentation of vue-select they mentioned the way to register the component as below...

but if the developer is already using vuetify in his project then v-select is not going to work. here I'm showing the demo of this error.

here I'm using v-select of vue-select while having vuetify in my vue project.

code for multiple select by vue-select

the output of code while using with vuetify

The reason behind this kind of abnormal behavior.

Naming conflict is the main villain behind this error. actually, vuetify has also a component named v-select, after using vue-select along with vuetify faced the naming conflict.

Solution

while registering the component with your app change the name of v-select with any other name as:

Vue.component('anyothername-select', vSelect)

you can use any other name also 😊😂

<anyothername-select multiple v-model="selected" :options="['Canada','United States']" />

if you are also facing such funny and annoying errors during development then you should tweet me 😎 I will resolve them and post an interesting solution that will help new guys who are just entering the world of development web applications.