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

Question

我试图实现这个：

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

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

  

[Vue警告]：挂钩错误：“TypeError：$（...）。select2不是函数”

在

中找到

我收到此错误

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不是函数的错误？

Answer 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