Передача ссылки на функцию через атрибут данных в Vue

Question

Я пытаюсь передать функцию в recaptcha для использования в качестве обратного вызова.Мне нужно написать:

data-callback="function"

В Vue, как мне добавить ссылку на функцию?Я пробовал:

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

data-callback="this.submitFocus"

Я использую Vue 2

Answer 1

Recaptcha2 использует строку data-callback для вызова глобально доступной функции.

Из того, что я вижу в документации , не похоже, что существует программный способ установкитаким образом, вам может понадобиться что-то вроде этого

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

с

data-callback="submitFocus"

в вашем шаблоне.Значение атрибута просто должно соответствовать функции, добавленной к window.

Answer 2

data-callback - это атрибут html элемента DOM, это просто строка.Он не знает о контексте вашего экземпляра объекта, т.е.this.

Таким образом, вы не можете использовать this при установке атрибута для вашей ReCaptcha, он будет понимать только те функции, которые могут быть вызваны без this.

Если бы у вас была функция, определенная как

function submitFocus(){ ... }

глобально, вы могли бы заставить ReCaptcha вызывать ее, установив data-callback в submitFocus без ссылки на this.

data-callback="submitFocus"