Vue Multiselect无法挂载到JS动态生成的新组件上如何解决？

你遇到的核心问题是：同一个Vue实例只能挂载到一个DOM元素上。你现在复用了metricVue这个实例，第一次调用$mount('#metric1_1')时，实例已经和这个元素绑定了，后续再用它去挂载#metric1_2这类新元素，Vue不会执行任何操作——因为一个实例只能对应一个根DOM节点。

针对你的场景，有两种可行的处理方式，推荐优先用第二种（Vue生态的最佳实践）：

方案1：为每个动态元素创建独立Vue实例 #

如果你的场景比较简单，不需要统一管理所有多选框的状态，可以每次新增元素时都创建一个全新的Vue实例：

function addVues(vc){
  // 每次调用都生成新的Vue实例，避免复用导致的挂载失败
  new Vue({
    components: { Multiselect: window.VueMultiselect.default },
    data: {
      value: { key: 'ctr', value: 'CTR' },
      options: toKeysValues(metricNames)
    },
    methods: {
      customLabel (option) {
        return `${option.value}`
      }
    }
  }).$mount('#metric1_'+vc);
}

这种方式简单直接，但如果生成大量实例，会有一定性能开销，且每个实例的状态是独立的，后续要统一收集数据会比较麻烦。

方案2：用Vue列表渲染管理动态组件（推荐） #

这是Vue官方推荐的做法——让Vue接管DOM的生成和状态管理，而不是手动生成DOM后再挂载。具体步骤如下：

1. 先在页面上准备一个根容器：

<div id="metrics-root">
  <!-- 用v-for循环渲染所有多选框 -->
  <multiselect
    v-for="(metric, idx) in metricList"
    :key="`metric-${idx}`"
    v-model="metric.selectedValue"
    :options="allOptions"
    :custom-label="customLabel"
  ></multiselect>
  
  <!-- 点击按钮新增多选框（也可以对应你原来的动态生成逻辑） -->
  <button @click="addNewMetric">添加新指标选择框</button>
</div>

2. 编写根Vue实例的逻辑：

new Vue({
  el: '#metrics-root',
  components: { Multiselect: window.VueMultiselect.default },
  data: {
    allOptions: toKeysValues(metricNames),
    // 存储所有多选框的状态，初始默认一个
    metricList: [
      { selectedValue: { key: 'ctr', value: 'CTR' } }
    ]
  },
  methods: {
    customLabel (option) {
      return `${option.value}`
    },
    addNewMetric() {
      // 新增状态项，Vue会自动渲染对应的multiselect组件
      this.metricList.push({
        selectedValue: { key: 'ctr', value: 'CTR' } // 默认选中值
      })
    }
  }
})

这种方式完全由Vue管理DOM和状态，不需要手动处理挂载逻辑，所有多选框的选中值都存在metricList数组里，后续收集数据也非常方便，性能和可维护性都更好。

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