通过 Vue 中的数据属性传递函数引用

Question

我正在尝试将一个函数传递给 recaptcha 以用作回调。我需要写：

data-callback="function"

在Vue中如何添加函数引用？我试过：

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

data-callback="this.submitFocus"

我正在使用 Vue 2

Answer 1

data-callback 是 DOM 元素的 html 属性，它只是一个字符串。它不知道您的对象实例的上下文，即。 this.

因此，在为您的 ReCaptcha 设置属性时不能使用 this，它只会理解可以在没有 this 的情况下调用的函数。

如果你有一个定义为

的函数

function submitFocus(){ ... }

在全球范围内，您可以通过将 data-callback 设置为 submitFocus 而不引用 this.

来让 ReCaptcha 调用它

data-callback="submitFocus"

Answer 2

Recaptcha2 使用 data-callback 字符串调用全局可用函数。

从我在 documentation 中看到的情况来看，似乎没有编程方式来设置它，因此您可能不得不使用类似这样的东西

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

和

data-callback="submitFocus"

在您的模板中。属性值只需要匹配添加到 window.

的函数即可

通过 Vue 中的数据属性传递函数引用

Passing a function reference through data attribute in Vue

recaptcha

vue.js

vuejs2