Vue以编程方式选择关闭下拉菜单答案

【问题标题】：Vue Select close dropdown programmaticallyVue以编程方式选择关闭下拉菜单
【发布时间】：2021-11-19 12:59:14
【问题描述】：

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

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

选择后的下拉菜单不关闭

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

【问题讨论】：

你能分享ChangeRole方法和roleCategory数组吗？
@cafertayyar 我用 ChangeRole 和 roleCategory 更新了问题
users 的格式不正确。它包含roleName='user' 和roleName='admin'。必须使用: 而不是=。所以，这些必须是roleName:'user' 和roleName:'admin'

标签： vue.js sweetalert sweetalert2 vue-select vue-sweetalert2

【解决方案1】：

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

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

【讨论】：