• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

192
Vistas
¿Cómo puedo llamar a la función calculada desde JavaScript definida en otra función calculada con Vue?

Tengo esta función calculada definida en un componente independiente de Vue

 watchForCustomer() { this.customerId = window.meta.page.customerId if(this.customerId) { $(document).on("click", function(element) { let checkout = ['checkout'].includes(element.currentTarget.activeElement.name) if(checkout) { let checkoutForm = ['checkout', 'cart'].includes(element.currentTarget.activeElement.form.action.split('/').at(-1)) if(checkoutForm) { getCustomerCredit() } } }) } },

El problema es que no se llama a getCustomerCredit() .

Intenté definirlo como: this.getCustomerCredit getCustomerCredit() app.$options.getCustomerCredit()

y obtengo que la función no está definida o simplemente no la llama.

Entonces, ¿cómo puedo llamar a este getcustomerCredit dentro del document al hacer clic en el evento?

Para completar, este es todo mi código:

 Vue.component('editable-text', { data: function () { return { message: "Yep, working", url: 'https://xxx', customerId: '', } }, mounted() { this.watchForCustomer }, template: ` <div> <p>Message is: {{ message }}</p> <input v-model="message" placeholder="edit me" :style="style" ></input> </div>`, computed: { style() { return { position: 'fixed', top: '100px', right: '30px', cursor: 'pointer', transition: 'all .4s', fontSize: '10px', color: '#000', border: 'none', background: 'hsla(0,0%,100%,.9098039215686274)', borderRadius: '10px', boxShadow: '0 0 0 2.5px #f2f2f2!important', width: '71px', height: 'auto', display: 'block', padding: '9px!important', } }, watchForCustomer() { this.customerId = window.meta.page.customerId if(this.customerId) { $(document).on("click", function(element) { let checkout = ['checkout'].includes(element.currentTarget.activeElement.name) if(checkout) { let checkoutForm = ['checkout', 'cart'].includes(element.currentTarget.activeElement.form.action.split('/').at(-1)) if(checkoutForm) { let me = Vue debugger getCustomerCredit() } } }) } }, async getCustomerCredit() { debugger let response = await axios.post(`${this.url}/app_proxy/customer`, { shopify_customer_id: this.customerId }) debugger }, }, methods: { }, }) new Vue({ el: '#components-demo' })
almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

La fuente de su problema se debe a que en la línea de abajo, cuando usa la palabra clave function , cambia a lo que this refiere, es decir, ahora this refiere al contexto del clic.

 $(document).on("click", function(element) {

Puede solucionar este problema utilizando una función de flecha para que

 $(document).on("click", element =>

También estás haciendo un mal uso de computed ,

style debe ser una propiedad de datos porque no tiene nada reactivo.

watchForCustomer debe moverse a la sección de methods

getCustomerCredit debe moverse a la sección de methods

almost 3 years ago · Juan Pablo Isaza Denunciar

0

¡Pow! Entiendo. Necesita usar un cohete hash en la función js. Así que en lugar de esto:

 watchForCustomer() { this.customerId = window.meta.page.customerId if(this.customerId) { $(document).on("click", function(element) { let checkout = ['checkout'].includes(element.currentTarget.activeElement.name) if(checkout) { let checkoutForm = ['checkout', 'cart'].includes(element.currentTarget.activeElement.form.action.split('/').at(-1)) if(checkoutForm) { let me = Vue debugger getCustomerCredit() } } }) } },

Haga esto y ahora puede acceder a todo en Vue dentro de la función js

 watchForCustomer() { this.customerId = window.ShopifyAnalytics.meta.page.customerId if(this.customerId) { $(document).on(("click"), element => { let checkout = ['checkout'].includes(element.currentTarget.activeElement.name) if(checkout) { let checkoutForm = ['checkout', 'cart'].includes(element.currentTarget.activeElement.form.action.split('/').at(-1)) if(checkoutForm) { this.getCustomerCredit } } }) } },
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda