0

Estoy intentando llamar un método de Vue (definido en el objeto methods del export del componente) desde una función de JQuery definida en el mounted() del mismo export del componente. Mi código es el siguiente:

Método: this.Cliente hace referencia a una variable Cliente creada en data().

// Metodos de Vue.
   methods: {
      async ObtenerClienteRUT(ParamRutCliente) {
         const api = new ApiEtc()
         const consulta = await api.getClienteRUT(ParamRutCliente)
         this.Cliente = consulta
      }
   },

Función JQuery: Extracto. Todo está dentro de un $(document).ready(function () {

// Si es válido permitir paso a siguiente paso.
   if (isValid) {
      var RutCliente = $('#inputRUT').val();
      var cliente = this.ObtenerClienteRUT(RutCliente)
      console.log(cliente)
      nextStepWizard.removeAttr('disabled').trigger('click');
   }

El problema que tengo actualmente, es que al llamar la función, me da error mediante consola indicándome que this.ObtenerClienteRUT no es una función.

Lo que he intentado hasta ahora:

  • Crear la misma función dentro del mismo mounted() donde se encuentra la función de JQuery y llamarla directamente, pero esto me retorna un objeto promesa donde no logro obtener solo el valor de PromiseResult que necesito.

¿Alguna idea para solucionar esto? Necesito 1) llamar a la función this.ObtenerClienteRUT del Methods o 2) al llamar a la función directamente poder obtener los resultados no la promesa como objeto.

¿Qué me recomiendan? ¿Es posible realizar lo que quiero hacer (form wizard) sin utilizar JQuery solamente con VUE? Desde ya muchas gracias :D

1
  • Al ser un vue 3 puedes utilizar las composables functions, extraes esa función del componente y utilízala donde tú quieras, la importas o la requieres y la ejecutas con jQuery, ahora si el resultado de esa función la quieres pasar a Vue, podrías hacerlo si lo guardas en localstorage y en algún hook de Vue haces en getItem de localStorge
    – Jozaguts
    Commented el 6 jul. 2022 a las 16:22

1 respuesta 1

0

Aunque no sé por qué se utilizaría .ready dentro de un hook de Vue, la solución es el uso de arrow functions para el callback de .ready, para las cuales la sintáxis function (args) {} se reemplaza por (args) => {}. La diferencia entre las dos formas de función resuelve problemas como este, en las arrow functions el objeto this en el contexto de la función será es mismo del contexto en que se define la función.

{
    ...

    mounted() {
        $(document).ready(() => {
            ...
        })
    },
}

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.