在b-modal中使用vue-multiselect报'_wrapper'未定义错误如何解决？

当前报错本质是vue-multiselect内部缓存的DOM引用（_wrapper）在组件更新、渲染时找不到对应的绑定节点，在嵌套BootstrapVue弹窗的场景下，基本都是渲染时机冲突、版本缺陷、更新逻辑顺序三类问题导致的，可按以下顺序排查解决：

• 调整b-modal的懒渲染配置：b-modal默认开启lazy懒渲染机制，弹窗内部的DOM只有第一次打开弹窗时才会正式挂载。此时vue-multiselect的初始化会早于弹窗的DOM布局完成，直接触发内部引用失效。可选两种修复方式：
  1. 给<b-modal>标签添加:lazy="false"属性，让弹窗内部的DOM在页面初始化阶段就完成挂载，避免multiselect在弹窗渲染中途抢跑初始化
  2. 用v-if控制multiselect的渲染时机：给multiselect添加动态渲染标识，绑定到b-modal的显示完成事件上，等弹窗完全展示、DOM布局稳定后再挂载选择器。示例代码：

     <b-modal id="skills" @shown="isMultiselectReady = true" @hide="isMultiselectReady = false">
       <div>
         <label class="typo__label">Tagging</label>
         <multiselect
           v-if="isMultiselectReady"
           v-model="value"
           tag-placeholder="Add this as new tag"
           placeholder="Search or add a tag"
           label="name"
           track-by="code"
           :options="options"
           :multiple="true"
           :taggable="true"
           @tag="addTags"
         ></multiselect>
       </div>
       <template #modal-footer="{cancel}">
         <b-button @click="cancel()" size="sm" variant="success">
           Add Info
         </b-button>
       </template>
     </b-modal>
     

• 校验vue-multiselect的版本兼容性：2.1.6之前的老版本存在已知缺陷，在嵌套延迟渲染容器、触发标签新增事件时，会出现内部DOM引用丢失的问题，直接抛出当前的TypeError。升级到兼容Vue2的最新稳定版即可覆盖这类已知bug。
• 调整标签新增的更新逻辑时机：当前addTags方法是在tag事件触发时同步更新options和value数组，部分版本会和multiselect内部的渲染队列、弹窗的布局计算队列产生冲突，导致组件更新时找不到对应的DOM节点。可以把数组更新逻辑放到$nextTick中延后一个执行周期，等组件当前渲染流程完成后再修改响应式数据：

  addTags(newTag) {
    const tag = {
      name: newTag,
      code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
    }
    this.$nextTick(() => {
      this.options.push(tag)
      this.value.push(tag)
    })
  }
  

• 排查DOM id冲突：确认当前页面没有重复使用skills作为b-modal的id，也不存在多个同id的嵌套组件，避免multiselect绑定到错误的父级DOM节点。

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