J'utilise vue-router et jQuery dans le modèle, quand je commute le routeur $ (document) .ready () est un échec

Je ne connais pas jQuery en vue de l'utilisation correcte. Lorsque je rafraîchis la page, $(document).ready() a un rôle. Mais lorsque je passe la page par vue-routeur, $(document).ready() ne fonctionne pas.

 <template> <div id="photo_wrap"> <div class="photo_frame" v-for="(photo,index) in photos"> <img v-bind:src=" 'src/assets/photo/' + index + '.jpg' "> </div> </div> </template> <script> import $ from 'jquery' export default { name: 'photo', data() { return { photos: [ {},{},{},{},{} ] } } } $(function () { console.log('something') }) </script> 

Au lieu de compter sur $(document).ready() dans une vue webapp, vous pouvez utiliser l'un des crochets de cycle de vie à cette fin. Vous pouvez essayer d'utiliser le montage, car il se rapproche de $(document).ready() :

Appelé après que l'instance vient d'être montée où el est remplacé par le nouvellement créé vm. $ El. Si l'instance racine est montée sur un élément dans le document, vm. $ El sera également dans le document lorsqu'il est monté.

Vous pouvez l'accrocher comme ceci:

 <script> export default { name: 'photo', data() { return { photos: [ {},{},{},{},{} ] } }, mounted () { console.log('something') } } 

Je sais que vous avez probablement obtenu la réponse que vous recherchiez, mais pour ceux qui sont venus ici pour trouver un moyen d'utiliser jQuery à l'intérieur de la vue:

Vous devriez simplement ajouter une étiquette de script sur votre fichier index.html et, après cela, vous pouvez utiliser $ variable chaque fois que le composant est créé par vue. Tout comme l'un des crochets du cycle de vie mentionnés par Saurabh , ou comme une méthode invoquée par une directive v-on.

par exemple:

 <template> ///get user name and password here through inputs/// <button v-on:click="submit"> submit me please</button> </template> <script> export default { name: 'something', data() { return { username : '', password : '', baseUrl : 'felan.com' } }, methods: { submit() { $.post(this.baseUrl + '/member/login', { username: this.username, password: this.password, }).then((response) => { if (response.valid) { //do something } else { //do something else } }).fail(() => console.log('failed')) } } } </script> <style> </style>