How can I call computed function from JavaScript defined in another computed function with Vue?

Question

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

Shoejep · Answer 1 · 2022-02-02T11:12:16.623

1

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

edited Feb 02 '22 at 11:12

answered Feb 01 '22 at 20:18

Shoejep

4,414
4
22
26

I guess you meant "should be a method" – Estus Flask Feb 02 '22 at 05:48
@EstusFlask I largely consider them to be same thing, but yes, I've updated my answer to be clearer as they were already functions but should be in the methods part of the Vue instance. – Shoejep Feb 02 '22 at 11:13

score 0 · Answer 2 · answered Feb 01 '22 at 20:13

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

"hash rocket" is a term from Ruby. In JavaScript, it's called [*arrow function*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) (or colloquially *fat arrow*). — tony19, Feb 02 '22 at 01:25

How can I call computed function from JavaScript defined in another computed function with Vue?

2 Answers2