点击按钮切换vue-multiselect开合状态异常求助

Hey，我来帮你捋清楚这个问题的根源，以及对应的解决办法～

问题到底出在哪？ #

你当前的实现存在状态同步冲突的问题：

• 你一边通过手动操作DOM的focus()/blur()来触发组件展开/收起，另一边又通过@open/@close事件同步外部的isOpen状态；
• 第二次点击按钮时，组件内部的状态和你手动设置的isOpen会出现竞态：比如你调用blur()后，组件触发@close把isOpen设为false，但组件内部的某些后续逻辑又可能触发@open（或者手动赋值和组件事件的执行顺序导致状态来回跳），最终就出现了isOpen闪烁后停在true的异常。

另外，直接操作DOM元素的focus/blur并不是控制vue-multiselect展开收起的正确姿势，组件本身已经提供了更可靠的API来处理状态控制。

正确的解决方式 #

vue-multiselect支持通过is-open prop直接控制下拉框的展开/收起状态，配合这个prop来实现按钮控制，就能彻底避免状态冲突。

修改后的完整代码如下：

模板部分 #

<div id="app">
  <button @click="toggle">open and close later</button>
  <pre>{{ isOpen }}</pre>
  <multiselect 
    ref="multiselect" 
    v-model="value" 
    :options="options" 
    :multiple="true" 
    track-by="library" 
    :custom-label="customLabel"
    :is-open="isOpen"
    @close="isOpen = false"
    @open="isOpen = true"
  >
  </multiselect>
</div>

JS部分 #

new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data: {
    isOpen: false,
    value: { language: 'JavaScript', library: 'Vue-Multiselect' },
    options: [
      { language: 'JavaScript', library: 'Vue.js' },
      { language: 'JavaScript', library: 'Vue-Multiselect' },
      { language: 'JavaScript', library: 'Vuelidate' }
    ]
  },
  methods: {
    toggle () {
      // 直接切换外部状态，组件会通过is-open prop自动响应
      this.isOpen = !this.isOpen;
      // 如果需要展开时自动聚焦输入框，调用组件内置的focus方法（官方API更可靠）
      if (this.isOpen) {
        this.$refs.multiselect.focus();
      }
    },
    customLabel (option) {
      return `${option.library} (${option.language})`;
    }
  }
}).$mount('#app')

关键改动说明 #

• 新增:is-open="isOpen" prop，让组件的展开状态完全由外部的isOpen变量驱动，实现双向状态绑定；
• 简化toggle方法，直接切换isOpen的值，不再手动操作DOM的blur/focus，避免触发不必要的组件内部事件冲突；
• 若需要在展开时聚焦输入框，调用组件内置的focus()方法（而非直接操作DOM元素），这是官方提供的API，稳定性更高；
• 保留@open/@close事件同步isOpen，是为了兼容用户直接点击组件自身触发展开/收起的场景，保证外部状态和组件内部状态始终一致。

这样修改后，按钮点击时isOpen的状态就不会再出现闪烁的问题了，状态同步也会更稳定。

内容的提问来源于stack exchange，提问作者Riccu