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

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

CodePudding user response：

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

CodePudding user response：

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 just be a function

getCustomerCredit should just be a function