1

Necesito pasar como parametro "documento" de mi componente padre al hijo pero en el componente hijo me llega como 'undefined'.

El primer componente se encarga de mostrar una lista de clientes y proporciona un botón "Ver" para ver un informe específico de un cliente.

El segundo componente recibe "documento" como parametro que utiliza para realizar una segunda solicitud para obtener un informe de un cliente específico.

El padre: lo que muestra el log en verInformeCliente es valido.

export default {
    components: {
        InformeDeRuedaPorCliente
    },
    data() {
        return {
            mandantes: [],
            documento: null
        };
    },
    methods: {
        verInformeCliente(documento) {
            console.log(documento);
            if (documento) {
                const nuevaVentanaURL = `/mandante/${documento}`;
                window.open(nuevaVentanaURL, '_blank');
            }
        },

    },
    created() {
        solicitud('/mandantes/obtener/', {}).then((respuesta) => {
            this.mandantes = respuesta.datos;
        });
    }
};



<button @click="verInformeCliente(mandante.documento)">Ver</button>
      
<div v-if="documento"> 
<InformeDeRuedaPorCliente :documento="documento" />
</div>

El hijo: el log en created viene como 'undifined'

export default {
    data() {
        return {
            informeMandante: [],
        };
    },
    props: {
        documento: {
            type: Number,
            required: true
        }
    },
    created() {
        solicitud(`/general/obtener/${this.documento}`, {}).then((respuesta) => {
            console.log(this.documento);
            if (respuesta && respuesta.datos) {
                this.informeMandante = respuesta.datos;
            }
        });
    },
};

Cualquier ayuda para solucionar este problema sería muy apreciada. ¡Gracias!

2
  • En verdad trabajo con Angular y un poco de React, pero se me hace muy muy raro que si abres una ventana nueva el estado de tu aplicación se mantenga, no? Le estás pidiendo a tu navegador que abra una ventana completamente nueva (_blank), no una pestaña si quiera. Si en esa ventana nueva se carga otra vez tu aplicación, el estado no lo vas a tener disponible... el estado de tu aplicación se quedó en la otra ventana.
    – Benito-B
    Commented el 23 oct. 2023 a las 9:23
  • Yo no idea de Vue.js, pero a modo de aportar: Por lo que entiendo documento es una variable que se setea automáticamente por el framework y created es un evento. Si este evento se ejecuta antes que se produzca el seteo de documento, este será siempre undefined, esto depende del ciclo de vida de vue.js. Prueba cambiar el created del 2do código por mounted
    – Yussef
    Commented el 23 oct. 2023 a las 10:36

1 respuesta 1

0

El problema es de contextos. La palabra clave this se usa para referirnos al contexto desde donde se está ejecutando ese this. Vue vincula en this el contexto de la estancia del componente, es por eso que desde cualquier sitio del componente podemos usar this para llamar a variables del data, propiedades, funciones... que pertenezcan a la instancia de ese componente.

Hasta ahí bien, el problema es que en las funciones flecha el contexto que manejamos es distinto. El contexto que usan es el del objeto window, por lo que al buscar tu variable dentro de una función flecha no la va a encontrar definida.

const app = Vue.createApp({
  data() {
    return { saludo: '¡Hola!' };
  },
  created() {
    this.saludar()
  },
  methods: {
    saludar: () => {
      console.log(this.saludo)
    }
  }
})
app.mount('#app')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app"></div>

En el primer ejemplo se puede ver que al tratar de acceder a la variable del data saludo estamos obteniendo un undefined, como en tu caso. En cambio, si declaramos la variable en el objeto window si que vamos a poder acceder a ella desde dentro de la función flecha.

window.saludo = '¡Adios!'

const app = Vue.createApp({
  data() {
    return { saludo: '¡Hola!' };
  },
  created() {
    this.saludar()
  },
  methods: {
    saludar: () => {
      console.log(this.saludo)
    }
  }
})
app.mount('#app')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app"></div>

Si lo que necesito es acceder a saludo desde saludar puedo o bien hacer que la función saludar no sea una función flecha.

const app = Vue.createApp({
  data() {
    return { saludo: '¡Hola!' };
  },
  created() {
    this.saludar()
  },
  methods: {
    saludar() {
      console.log(this.saludo)
    }
  }
})
app.mount('#app')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app"></div>

O bien pasarle a saludar la variable saludo como parámetro de entrada. De esta manera conseguimos traer la varable saludo al contexto de la función flecha.

const app = Vue.createApp({
  data() {
    return { saludo: '¡Hola!' };
  },
  created() {
    this.saludar(this.saludo)
  },
  methods: {
    saludar: (saludo) => {
      console.log(saludo)
    }
  }
})
app.mount('#app')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app"></div>

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.