jquery-nice-select 与 vue.js 不是函数

Question

我使用这个库：https://github.com/hernansartorio/jquery-nice-select

并在文件 bootstrap.js 中包含此插件：

require('jquery-nice-select');

比我在申请文件中使用app.js

app.js:

require('./bootstrap');

// ... code

const app = new Vue({
    router,
    components: {
      App
    },
    template: '<app></app>',
    mounted() {
        $(document).find('select').niceSelect();
    }
}).$mount('#app');

用于构建我的项目的配置 webpack.mix.js:

mix
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/vendors.scss', 'public/css')
    .sass('resources/assets/sass/style.scss', 'public/css')
    .extract(
        [
            'vue',
            'vue-resource',
            'vue-router',
            'vue-scrollto',
            'vue-meta'
        ],
        'public/js/vue.js'
    )
    .extract(
        [
            'jquery',
            'bootstrap-sass',
            'jquery-nice-select',
            'owl.carousel',
            'jquery-parallax.js',
        ],
        'public/js/vendor.js'
    )
    .autoload({
        'jquery': ['$', 'jquery', 'jQuery', 'window.jQuery'],
        'tether': ['window.Tether', 'Tether'],
    })
;

但是，当您尝试使用niceSelect 插件时，出现以下错误：

vue.js:484 [Vue warn]: Error in mounted hook: "TypeError: $(...).niceSelect is not a function"

还有这个：

TypeError: $(...).niceSelect is not a function

我不知道去哪里看，我做的不对？在我看来，这种问题只出现在给定的插件上，之前所有插件都已连接并正常工作。

P.S. 注意，错误不是没有声明函数，而是不是函数。是的，public 中所有 JS 的连接都正常完成：

<!-- code -->
<script src="{{ mix('/js/manifest.js') }}"></script>
<script src="{{ mix('/js/vendor.js') }}"></script>
<script src="{{ mix('/js/vue.js') }}"></script>
<script src="{{ mix('/js/app.js') }}"></script>

UPD:顺便说一句，同样的错误出现在指令中。

export default {
    directives: {
        niceSelect: {
            update(el) {
                const $  = window.$;
                $(el).niceSelect();
            }
        }
    }
}

Answer 1

你好像忘了用你的解决方案更新你的问题 https://github.com/hernansartorio/jquery-nice-select/issues/60

我自己可以说我有同样的错误 niceSelect is not a function（使用 Yii2 框架，但这不是必需的），原因是 jQuery 被包含两次，导致页面源（在浏览器）是这样的：

css
jquery.js
不错-select.js
niceSelect初始化函数
主要文档内容
另一个jquery.js

我刚刚修改了代码，使最后一项消失了，它起作用了。

所以我建议查看页面生成的源代码（在浏览器中）

Answer 2

是的，我有一些 link 到 jQuery。我留下了一个，它起作用了！

您可以在 .js 文件中添加 import 或 require

require('jquery-nice-select');

或

import 'jquery-nice-select/js/jquery.nice-select';

我用的是没有任何框架的Webpack

jquery-nice-select 与 vue.js 不是函数

jquery-nice-select with vue.js is not a function

javascript

jquery-plugins

webpack

vue.js