I have this computed function defined in a standalone Vue component
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()
}
}
})
}
},
The problem is that getCustomerCredit() is not getting called.
I've tried to define it as:
this.getCustomerCredit
getCustomerCredit()
app.$options.getCustomerCredit()
and I get either that the function is not defined or it simply doesn't call it.
So how can I call this getcustomerCredit inside the document on click event?
For completeness this is all my code:
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' })
The source of your problem is because the below line, when you use the function keyword it changes what this refers to, i.e. this now refers to the context of the click.
$(document).on("click", function(element) {
You can fix this problem by using an arrow function so
$(document).on("click", element =>
You're also misusing computed,
style should be a data property because it has nothing reactive.
watchForCustomer should be moved to the methods section
getCustomerCredit should be moved to the methods section
Pow!! Got it. You need to use a hash rocket in the js function. So instead of this:
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()
}
}
})
}
},
Do this and now you are able to access everything in Vue inside of the js function
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
}
}
})
}
},