Discussion :

[snike]

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)

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 vue est bien montée.

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'erreur

Uncaught ReferenceError: app_test is not defined

La vue app_test est pourtant bien lancée.

Merci par avance pour votre aide

[NoSmoking]

Bonjour,
dans ton cas, l'appel se fait hors du scope de l’instanciation de l'application !
Infine quel est le but ?