以下 vue2 网站上的教程无法让第三方 jquery 插件 select2 工作

Posted 2023-02-22

【中文标题】以下 vue2 网站上的教程无法让第三方 jquery 插件 select2 工作

【英文标题】：following tutorial on vue2 website can't get third party jquery plugin select2 to work

【发布时间】：2017-12-28 01:17:38

【问题描述】：

我试图实现这个：

https://vuejs.org/v2/examples/select2.html

虽然我在我的页面中使用了 Vue 组件，但我并没有制作 SPA。

[Vue 警告]：挂载钩子错误：“TypeError: $(...).select2 is not a function”

发现于

我收到此错误

Error in mounted hook: "TypeError: $(...).select2 is not a function"

found in <Select2> at 
C:\laragon\www\lara\resources\assets\js\components\ui\Select2.vue

我在 html 文件中同时包含了 select2 和我的 vuejs：

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src=" asset('js/content_type_blocks.js') ? str_random(7) "></script>

不知道为什么会出现select2不是函数的错误？

【问题讨论】：

你是否也包含了 jQuery？

听起来 jQuery 没有加载。在控制台中输入$ 或jQuery 会发生什么？

是的，我也包含它。我正在使用另一个 jquery 插件颜色选择器，但只有在将其放入 package.json 文件中后才能使该插件工作：“bootstrap-colorpicker”：“^2.5.0”，然后将其作为组件导入到我的应用程序中.vue 使用 import BootstrapColorPicker from 'bootstrap-colorpicker' 然后我就可以使用那个插件了。但我找不到如何像使用 colorpicker 那样在 package.json select2 中安装，因为 select2 似乎不是节点包

您的选择器是否找到了您要选择的内容？你在等待 DOM 准备好吗？

您能否包含 mounted 挂钩中的代码，因为这似乎是发生错误的地方？更好的是，（请记住，您不是在创建 SPA）使用 jsbin、jsfiddle、plunker、codepen 等网站创建 minimal reproducible example...

【参考方案1】：

在Select2插件初始化的时候，jquery还没有加载到全局栈中。

---

提出几种解决方案：

只需通过 NPM npm install --save select2 添加 Select2 然后导入即可 我建议使用更友好的Selectize.js 此外，还有一个现成的Vue 组件vue2-selectize。另请查看此性能测试：https://jsperf.com/chosen-select2-selectize 您可以尝试使用类似的解决方案，专门为 Vue 编写：https://github.com/monterail/vue-multiselect