vue-select使用value和input替代v-model时下拉框不关闭，如何编程关闭？

算力阿峰

2026-10-2

要实现编程式关闭vue-select下拉框，按以下步骤修改代码即可：

步骤1：修正循环内的ref绑定

你使用v-for渲染了多个v-select组件，固定ref值会导致实例引用冲突，需要改为动态绑定和用户id关联的唯一ref：

<div v-for="user in users" key="user.id">
    <v-select
                  :ref="`vSelect_${user.id}`"
                  :value="user.roleName"
                  label="title"
                  :clearable="false"
                  :options="roleCategory"
                  @input="item => ChangeRole(item,user)"
                />
</div>

步骤2：在ChangeRole方法中调用关闭方法

vue-select内置了close()实例方法，可以直接控制下拉框收起，在事件触发后先执行关闭逻辑即可：

methods: {
  ChangeRole(item,user) {
    // 获取当前对应的v-select实例，调用close方法关闭下拉
    // Vue2中v-for绑定的ref会返回数组，需要取下标0的元素获取实例
    const selectInstance = this.$refs[`vSelect_${user.id}`][0]
    selectInstance.close()

    this.$swal({
      title: '你确定吗？',
      text: '你将要修改用户权限！',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: '是的，修改！',
      customClass: {
        confirmButton: 'btn btn-primary',
        cancelButton: 'btn btn-outline-danger',
      },
      buttonsStyling: false,
    }).then(result => {
      if (result.isConfirmed) {
        // 注意原代码此处字段匹配错误，选中的item字段为title，没有roleName属性
        user.roleName = item.title 
      }
    })
  } 
}