data() 中声明的变量在 Listener 中未定义

Question

我在组件的 data() 部分声明了一个“userid”变量。在 mounted() 方法中，我正在启动 MetaMask 的侦听器。在 MetaMask 中更改帐户后，将触发此侦听器。但是，侦听器中的“userid”（在 data() 中声明）未定义。

 export default {
  name: 'App',
  data () {
   return {
    userid: null
   }
 },
 mounted () {
 ...
 // MetaMask Listener
 window.ethereum.on('accountsChanged', function (accounts) {
  this.userid = accounts
 })
}

我该如何解决这个问题？

Answer 1

Vue 在 strict 模式下运行。这意味着 this 绑定到常规函数本身。

你有3种方法可以解决这个问题：

使用箭头函数：

 window.ethereum.on('accountsChanged', accounts => {
  this.userid = accounts
 })

使用.bind()

 window.ethereum.on('accountsChanged', function (accounts) {
  this.userid = accounts
 }.bind(this))

在外面声明一个变量并赋值给this:

 var self = this;
 window.ethereum.on('accountsChanged', function (accounts) {
  self.userid = accounts
 })

data() 中声明的变量在 Listener 中未定义

Variable declared in data() is Undefined in Listener

javascript

node.js

vue.js

ethereum

metamask