es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Vue2 – API de Composición – TypeScript – Llamada al método de componente hijo

Estoy construyendo una aplicación web utilizando Vue2 con Composition API y TypeScript.

Tengo un formulario que está compuesto por componentes personalizados separados. Cuando el usuario hace clic en “guardar”, quiero ejecutar el método validate presente en cada uno de los componentes, pero parece que TypeScript no está de acuerdo con los resultados reales de la compilación.

Aquí hay una versión super simplificada del problema con solo un componente.

Componente

import { defineComponent, ref } from "@vue/composition-api";
export default defineComponent({
  methods: {
    validate() {
      let validationResult = { isValid: false };
      // [...lógica de validación]
      return validationResult;
    }
  }
});

Padre

<template>
  <div>
    <my-component>
    <button @click="save">save</button>
  </my-component></div>
</template>
import { defineComponent, onMounted, toRefs, ref } from "@vue/composition-api";
import MyComponent from './MyComponent.vue';
export default defineComponent({
  components: {
    MyComponent,
  },
  setup() {
    const myComponentInst = ref<typeof mycomponent="" |="" null="">(null);

    return { myComponentInst };
  },
  methods: {
    save() {
      const result = this.myComponentInst?.methods?.validate();
      //[...] etc. realizar guardado si todo es válido
    }
  }
});

TypeScript está bien con lo anterior, pero methods en const result = this.myComponentInst?.methods?.validate(); siempre es null en tiempo de ejecución.

Al examinar this.myComponentInst en un depurador, veo:

VueComponent {_uid: 15, _isVue: true, $options: {...}, [...etc], validate: f(), ...}

Contiene directamente los methods del componente, incluido validate. Pero, si escribo const result = this.myComponentInst.validate();, obtengo el siguiente error de compilación:

Property 'validate' does not exist on type 'VueProxy<{ ...9 more }>' Vetur(2339)

Pero sé que esta es la estructura correcta. Cuando inicio las instancias con const myComponentInst = ref<any>(null);, todo funciona… pero por supuesto, luego pierdo mi tipado.

¿Hay otra manera de obtener la instancia del componente de tal manera que Vetur/TypeScript no se queje al respecto y funcione correctamente en tiempo de ejecución?

¿Simplemente estoy referenciando el método de manera incorrecta?

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Parece que el problema está en acceder al método validate desde la instancia del componente. En lugar de usar this.myComponentInst.methods.validate(), intenta acceder al método directamente desde la instancia del componente de esta manera: this.myComponentInst!.validate(). Esto debería evitar el error de compilación de TypeScript y permitirte acceder al método en tiempo de ejecución. Además, asegúrate de agregar el operador de afirmación de no nulidad ! después de myComponentInst para asegurarte de que no sea nulo antes de llamar al método.

    Entonces tu función submit actualizada debería verse así:

      methods: {
        submit() {
          const result = this.myComponentInst!.validate();
    
          //[...] etc. realizar guardado si todo es válido
        }
      }
    

    Esto debería permitirte acceder al método validate en la instancia del componente y solucionar el problema que estás experimentando.

Comments are closed.