Vue.js 2指令集成Select2无法获取选中值，求解决方案

我刚好碰到过这个问题，Vue2和Vue1的指令机制差异确实会让老的Select2适配方案失效，核心是要处理好双向同步和Vue2的响应式逻辑，给你一套完整的解决办法：

Vue2移除了Vue1里的$add这类旧API，同时指令的生命周期钩子（比如update）的触发逻辑和参数都变了。更关键的是，Select2作为操作DOM的第三方插件，不会自动和Vue的响应式系统联动，必须手动绑定事件来同步选中值。

1. 编写适配Vue2的Select2指令 #

这个指令会处理初始化、双向值同步、以及组件销毁时的资源清理：

Vue.directive('select2', {
  // 元素插入DOM时初始化Select2
  inserted(el, binding, vnode) {
    // 初始化Select2，支持传入配置项
    const selectInstance = $(el).select2({
      ...binding.value
    });

    // 监听Select2的change事件，同步选中值到Vue的data
    selectInstance.on('change', function() {
      const selectedVal = $(this).val();
      // 找到v-model绑定的属性，更新Vue数据
      const modelDirective = vnode.data.directives.find(dir => dir.name === 'model');
      if (modelDirective) {
        vnode.context[modelDirective.expression] = selectedVal;
        // 手动触发Vue更新（针对某些复杂场景）
        vnode.context.$forceUpdate();
      }
    });

    // 把实例存到元素上，方便后续更新
    el._select2Instance = selectInstance;
  },

  // Vue数据更新时，同步到Select2
  update(el, binding) {
    if (el._select2Instance) {
      // 避免重复触发事件，用change.select2限定事件
      el._select2Instance.val(binding.value).trigger('change.select2');
    }
  },

  // 元素解绑时清理资源，防止内存泄漏
  unbind(el) {
    if (el._select2Instance) {
      el._select2Instance.off('change').destroy();
      delete el._select2Instance;
    }
  }
});

2. 在组件中使用指令 #

配合v-model就能实现双向绑定，示例如下：

<template>
  <div>
    <select 
      v-model="selectedItem" 
      v-select2="{ placeholder: '请选择一项', width: '100%' }"
    >
      <option value="">请选择</option>
      <option value="option1">选项1</option>
      <option value="option2">选项2</option>
      <option value="option3">选项3</option>
    </select>
    <p>当前选中值：{{ selectedItem }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: ''
    };
  }
};
</script>

3. 关键注意事项 #

• 双向同步必须手动实现：Select2的选中变化不会自动触发Vue的响应式更新，所以必须监听它的change事件来修改Vue数据；反之，Vue数据变化时也要主动更新Select2的状态。
• 清理资源很重要：在unbind钩子中销毁Select2实例并移除事件监听，这在单页应用切换路由时能避免内存泄漏。
• 适配复杂场景：如果你的Select2是异步加载选项（比如AJAX获取），可以在指令的inserted钩子中额外处理选项加载完成后的初始化逻辑。

Vue1的指令可以直接通过vnode.context.$set修改数据触发更新，而且指令的update钩子逻辑更简单；但Vue2的响应式系统基于Object.defineProperty，需要严格修改data属性才能触发更新，同时旧方案没有处理双向同步的完整逻辑，导致选中值无法同步到Vue中。

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