0

我在我的项目中使用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'}],
        }
      },

改变角色（）

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

我使用甜蜜警报

选择后的下拉菜单未关闭

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

4

1 回答 1

1

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

const searchEl = this.$refs.Vueselect.searchEl;
if (searchEl) {
   searchEl.blur();
}
于 2021-09-27T14:03:50.793 回答