Bonjour,
Pour éviter de charger tout le code au démarrage de mon application web, j'utilise la fonction import pour charger mes scripts js.
Le script de chargement:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14 <div class="row" id="corps"> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> function go2() { fetch('pages/test.html') .then(response => response.text()) .then(text => { document.getElementById('corps').innerHTML = text import('./pages/test.js'); }) } </script>
Le script test.js (pour la vue chargée dynamiquement)
La vue est bien montée.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 const { createApp } = Vue var app_test = createApp({ data() { return { name:'Le Roi', age:77, } }, mounted() {}, methods: { mon_age() { alert(this.age) } }, computed: {} }).mount('#app_test_div')
La page test.html
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 <div id="app_test_div" v-cloak> Nom : {{name}} <br><br> <button @click="mon_age">Mon age</button> </div> <br><br> <button onclick="alert(app_test.age)">Mon age externe</button>
J'ai bien la variable {{name}} qui est remplacée dans ma page.
Le bouton mon_age, à l'intérieur de ma vue affiche bien 77
Par contre, le bouton Mon age externe affiche l'erreurLa vue app_test est pourtant bien lancée.Uncaught ReferenceError: app_test is not defined
Merci par avance pour votre aide
Partager