Estamos usando Vue.js para implementar la función emergente. El botón "Hacer clic" en la aplicación Vue abrirá la ventana emergente correctamente, pero el siguiente ejemplo es vueApp.methods.openModal() /// llamar desde el exterior. La ventana emergente no aparece cuando llamo desde el exterior, aunque la llamada a la función en sí es posible. . ¿Por qué es esto? Además, ¿cómo puedo hacer que v-show funcione correctamente al llamar a un método desde fuera de Vue como este?
xxx.html
<div id="app"> <button v-on:click="openModal">Click</button> <div id="dbg_overlay" v-show="showContent" v-on:click="closeModal"> <div id="content"></div> <button v-on:click="closeModal">Close</button> </div> </div>xxx.js
const vueApp = { data() { return { showContent: false, } }, methods: { openModal: function() { this.showContent = true }, closeModal: function() { this.showContent = false } }, }; Vue.createApp(lessonScheduleEdit).mount("#app"); vueApp.methods.openModal() /// call from outsidevue estoy usando:
<script src="https://unpkg.com/vue@next"></script>La forma más fácil es usar v-if y verificar si su valor definido es igual a true . Como esto:
<div id="app"> <button id="show-modal" @click="showModal = true">Show Modal</button> <modal v-if="showModal" @close="showModal = false"> <!-- Your content in here --> </modal> </div> también puedes hacer showModal = true dentro de tus métodos, así:
methods: { clickModal() { //just renamed in template it's @click="clickModal()" showModal = true; } }¡Espero que esto te ayude!
Necesitas lo siguiente:
methodName en sus method , debe llamarlo directamente (por ejemplo: myVar.methodName() , no como myVar.methods.methodName() !!! )Cómo hacer que la variable esté disponible globalmente:
El método más común para declarar variables disponibles globalmente sería usar el objeto window :
window.myVueApp = Vue.createApp(vueApp).mount("#app"); // from anywhere else in the window: window.myVueApp.openModal(); Una forma más moderna de hacer que una variable esté disponible globalmente es usar el alias de la window : globalThis :
globalThis.myVueApp = Vue.createApp(vueApp).mount('#app'); // both of these will now work // because, inside a browser, globalThis === window window.myVueApp.openModal(); globalThis.myVueApp.openModal(); Nota: ¿puedo usar globalThis ?
Pero, a pesar de que window ahora tiene un alias nuevo y elegante, usarlo es igual de malo (lea por qué a continuación).
Nota: Por lo general, contaminar el ámbito global con variables se considera una mala práctica , ya que se corre el riesgo de colisiones de nombres (cuando tanto su código como el de otra persona, utilizados en la misma página, utilizan accidentalmente los mismos nombres de variables de ámbito global).
En última instancia, esto significa que, al menos en teoría, su código no es confiable (puede fallar en ciertas circunstancias). Idealmente, desea escribir un código indescifrable, que no interfiera (rompa) nada más que se ejecute en la misma página, en ningún momento.
Para minimizar este riesgo de colisión de nombres, podría colocar su aplicación dentro del espacio de nombres de Vue , que ya está disponible en el ámbito global, ya que sabemos que el espacio de nombres de Vue no tiene una propiedad myVueApp (y la probabilidad de que cualquier otra persona también use Vue.myVueApp en su página es insignificante):
Vue.myVueApp = // ...your app here...Véalo funcionando:
const vueApp = { data() { return { showContent: false, } }, methods: { openModal: function() { this.showContent = true }, closeModal: function() { this.showContent = false } }, }; Vue.myModeratelyAmazingVueApp = Vue.createApp(vueApp).mount("#app"); <script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script> <div id="app"> <button @click="openModal">Click</button> <div id="dbg_overlay" v-show="showContent" @click="closeModal"> <div id="content"></div> <button @click="closeModal">Close</button> </div> </div> <button onclick="Vue.myModeratelyAmazingVueApp.openModal()">external open</button>