Select2 在创建为 Vue 组件时不可见

Posted 2023-05-07

【中文标题】Select2 在创建为 Vue 组件时不可见

【英文标题】：Select2 not visible when created as a Vue component

【发布时间】：2016-12-19 04:58:58

【问题描述】：

我为select2 jquery 组件创建了一个vue.js 组件 如果组件的模板只是原始选择，则组件的问题是选择是不可见（未显示）：

<select v-select2="val">
</select>

（使用 chrome 检查器，我可以看到选择被 jquery 插件有效地转换为 select2，但尺寸为 1x1 px）

...问题是，如果我在模板上用 DIV 包装选择，一切正常：

<div>
  <select v-select2="val">
  </select>
</div>

我正在使用 vue 的指令 (v-select2) 将 select 转换为 select2

这里是完整代码https://jsfiddle.net/futuretelematics/tkL8zxby/

【问题讨论】：

我猜这个问题与组件模板有关，它使用 vue 的指令将 select 转换为 select2 如果未使用指令并且在创建组件时将select转换为select2，一切正常：jsfiddle.net/futuretelematics/a2kmhw64/2

【参考方案1】：

问题可能与select2 隐藏原始select，创建新span 并将其附加到原始@ 旁边这一事实有关。您最终会得到一个片段实例，如 Vue.js documentation 中所述，这是不鼓励的。

因此，建议在模板中始终使用单个根级别的普通元素。