I use vue-select in my project
When I use value and input alternative v-model
<div v-for="user in users" key="user.id">
<v-select
ref="Vueselect"
:value="user.roleName"
label="title"
:clearable="false"
:options="roleCategory"
@input="item => ChangeRole(item,user)"
/>
</div>
roleCategory
data() {
return {
roleCategory:[{value: 1 , title:'user'},{value: 1 , title:'admin'}],
users:[{id: 1 , title:'Test1',roleName='user'},{id: 2 , title:'Test2',roleName='admin'}],
}
},
ChangeRole()
methods: {
ChangeRole(item,user) {
this.$swal({
title: 'Are you sure?',
text: 'Do you want to change permision!',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, Change it!',
customClass: {
confirmButton: 'btn btn-primary',
cancelButton: 'btn btn-outline-danger',
},
buttonsStyling: false,
}).then(result => {
if (result.isConfirmed) {
user.roleName = item.roleName
}
})
}
}
i use Sweet Alert
the dropdown after select not close
how can close dropdown programmatically
There is a solution to close v-select programmatically. In your case this may help you:
const searchEl = this.$refs.Vueselect.searchEl;
if (searchEl) {
searchEl.blur();
}