Vue Select close dropdown programmatically

Question

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

Answer 1

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();
}