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' })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
¡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 } } }) } },