0

quiero llamar a un componente de vue a un archivo de javascript para que lo muestre

En este caso al que quiero llamar es a Iframe.vue, lo llamo mediante props:

props: ['id_cliente','id_cartera', 'num_telefono','id_telefono', 'id_progresivo','id_detalle'],

Y lo enlazo en el otro achivo Index.vue

<div id="idFicha">
   <Iframe v-if="iframeMain == true" id ="iframeMain" :id_cartera="id_cartera" :id_cliente = "id_cliente" :num_telefono = "telefono" :id_telefono="id_telefono" :id_detalle="id" :id_progresivo="id_progresivo"/> 
</div>

pero en la función donde lo llamo para que también se muestre el componente es en Sip_progresivo.js

function getEstado_pantalla(suma){
    if (((suma == 2) || (suma == 3))) {
        document.getElementById('cupcake1').style.display = "none";
        document.getElementById('cupcake2').style.display = "none";
        document.getElementById('cupcake3').style.display = "none";
        document.getElementById('cupcake4').style.display = "none";
            if (activo == false) {
           cargar_sicast() // Aqui es donde llamo al iframe para que se muestre 
                activo = true;
            }
}

1 respuesta 1

0

Para llamar al componente Iframe desde Sip_progresivo.js, debes tener en cuenta que este no es un componente de Vue y por lo que no se puede acceder a él directamente. Una opción es usar una función del componente padre para llamar al componente Iframe mediante un método.

Para hacerlo, primero debes añadir un método al componente Iframe que se encargue de mostrarlo:

// en Iframe.vue
methods: {
  mostrarIframe() {
    this.$emit('mostrar-iframe')
  }
}

Luego, debes añadir una función al componente padre (en este caso, Index.vue) que llame al método mostrarIframe del componente Iframe:

// en Index.vue
methods: {
  cargarIframe() {
    this.$refs.iframeMain.mostrarIframe()
  }
}

Por último, en el archivo Sip_progresivo.js puedes llamar a la función cargarIframe del componente padre usando window.app:

function getEstado_pantalla(suma) {
  if ((suma == 2) || (suma == 3)) {
    document.getElementById('cupcake1').style.display = "none";
    document.getElementById('cupcake2').style.display = "none";
    document.getElementById('cupcake3').style.display = "none";
    document.getElementById('cupcake4').style.display = "none";
    if (activo == false) {
      window.dispatchEvent(new CustomEvent('mostrar-iframe'))
      activo = true;
    }
  }
}

Una cosa a tener en cuenta es que para que esto funcione debes asegurarte de que el componente padre esté instanciado y disponible en window.app cuando se ejecute la función getEstado_pantalla.

2
  • Si pero lo que quiero llamar es al Iframe.vue, lo llamo mediante props pero como haría para poder llamarlo al archivo Sip_progresivo.js, ya que el Iframe se carga en el Index.vue
    – Smila
    el 5 ene. 2023 a las 12:55
  • Actualicé el código puedes ensayar nuevamente el 5 ene. 2023 a las 19:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.