Vue Select 以编程方式关闭下拉菜单

Question

我在我的项目中使用vue-select

当我使用值并输入替代 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>

角色类别

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

我用Sweet Alert

select后的下拉菜单未关闭

如何以编程方式关闭下拉菜单

Answer 1

有一个 solution 以编程方式关闭 v-select。 对于您的情况，这可能对您有所帮助：

const searchEl = this.$refs.Vueselect.searchEl;
if (searchEl) {
   searchEl.blur();
}