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