Passing a function reference through data attribute in Vue

Question

I am trying to pass a function into recaptcha to be used as a callback. I need to write:

data-callback="function"

In Vue how do I add the function reference? I've tried:

data-callback="{{ this.submitFocus }}"

data-callback="this.submitFocus"

I'm using Vue 2

Answer 1

Recaptcha2 uses the data-callback string to call a globally available function.

From what I can see in the documentation, it doesn't look like there's a programmatic way to set this so you might have to use something like this

beforeMount () {
  window.submitFocus = () => { // using arrow function to preserve "this"
    this.submitFocus()
  }
},
beforeDestroy () {
  delete window.submitFocus
}

with

data-callback="submitFocus"

in your template. The attribute value just needs to match the function added to window.