Lien entre une app vue chargée dynamiquement et le reste du javascript
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:
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)
Code:
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 vue est bien montée.
La page test.html
Code:
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'erreur
Citation:
Uncaught ReferenceError: app_test is not defined
La vue app_test est pourtant bien lancée.
Merci par avance pour votre aide
