jquery-nice-select avec vue.js n'est pas une fonction

Question

J'utilise cette bibliothèque: https://github.com/hernansartorio/jquery-nice-select

Et ce plugin dans inclure fichier bootstrap.js:

require('jquery-nice-select'); 

Que je l'utilise dans le fichier d'application app.js

app.js:

require('./bootstrap'); 

// ... code 

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

Config pour construire mon projet 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'], 
    }) 
; 

Toutefois, lorsque vous essayez d'utiliser le plug-in niceSelect, l'erreur suivante se produit:

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

et ceci:

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

Je ne comprends pas où regarder et ce que je fais ne va pas? Chez moi un tel problème est apparu seulement avec le plug-in donné, auparavant tout était toujours connecté et fonctionnait correctement.

P.S. Notez, l'erreur n'est pas que la fonction n'est pas déclarée, mais que ce n'est pas une fonction. Et oui la connexion de tous les JS dans le public se fait normalement:

<!-- 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: Par ailleurs, la même erreur apparaît dans les directives.

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

Answer 1

On dirait que vous avez oublié de mettre à jour votre question avec votre solution https://github.com/hernansartorio/jquery-nice-select/issues/60

De moi-même, je peux dire que j'avais même erreur niceSelect is not a function (avec cadre Yii2, mais il est pas nécessaire), la raison était que jQuery a été inclus deux fois, ce qui source de la page (dans le navigateur) était comme ceci:

• css jquery.js
• belle-select.js
• fonction d'initialisation de niceSelect
• contenu principal document
• un autre jquery.js

Je viens de code modifié pour dernier élément disparu, et il fonctionne.

Donc, je conseille d'examiner le code source résultant de la page (dans le navigateur)