Vue.js中如何访问对象内部方法？谷歌登录回调调用方法受阻

这个问题我太熟悉了！核心原因就是回调函数的this上下文不对——默认情况下，attachClickHandler的回调是普通函数，它的this指向的不是你的Vue实例，而是回调自身的执行上下文，所以你没法直接调用Vue methods里的方法。下面给你三种靠谱的解决方案：

方案1：使用箭头函数（最简洁推荐） #

箭头函数不会创建自己的this，它会继承外层作用域的this，也就是你的Vue实例。直接把回调改成箭头函数就行：

gInit: function() {
  gapi.load('auth2', () => {
    auth2 = gapi.auth2.init({
      client_id: 'MY-Client-id.apps.googleusercontent.com',
      cookiepolicy: 'single_host_origin',
      //scope: 'additional_scope'
    });
    auth2.attachClickHandler(document.getElementById('googleBtn'), {}, (googleUser) => {
      // 这里的this就是Vue实例了！
      this.yourVueMethod(); // 直接调用你的Vue方法
      const profile = googleUser.getBasicProfile();
      console.log('用户ID: ' + profile.getId());
      console.log('用户邮箱: ' + profile.getEmail());
      // 其他业务逻辑...
    });
  });
}

方案2：提前保存Vue实例的引用 #

如果你的项目需要兼容不支持ES6箭头函数的环境，可以在gInit方法开头先把Vue实例存成一个变量，比如vm，然后在回调里用vm代替this：

gInit: function() {
  const vm = this; // 保存Vue实例的引用
  gapi.load('auth2', function() {
    auth2 = gapi.auth2.init({
      client_id: 'MY-Client-id.apps.googleusercontent.com',
      cookiepolicy: 'single_host_origin',
      //scope: 'additional_scope'
    });
    auth2.attachClickHandler(document.getElementById('googleBtn'), {}, function(googleUser) {
      // 用vm访问Vue实例的方法
      vm.yourVueMethod();
      const profile = googleUser.getBasicProfile();
      // 其他逻辑...
    });
  });
}

方案3：用bind绑定this到Vue实例 #

你也可以直接给回调函数绑定Vue实例的this，确保回调里的this指向正确：

gInit: function() {
  gapi.load('auth2', function() {
    auth2 = gapi.auth2.init({
      client_id: 'MY-Client-id.apps.googleusercontent.com',
      cookiepolicy: 'single_host_origin',
      //scope: 'additional_scope'
    });
    auth2.attachClickHandler(document.getElementById('googleBtn'), {}, function(googleUser) {
      this.yourVueMethod();
      const profile = googleUser.getBasicProfile();
      // 其他逻辑...
    }.bind(this)); // 把Vue实例的this绑定到回调函数
  });
}

额外提醒 #

别忘了确保你要调用的方法已经正确定义在Vue的methods里，比如：

methods: {
  gInit: function() { /* ... */ },
  yourVueMethod: function() {
    console.log('成功调用Vue实例的方法！');
    // 你的业务逻辑，比如更新data、发起请求等
  }
}

选其中一种方案就能解决你的问题啦，个人最推荐箭头函数，代码更简洁直观~

内容的提问来源于stack exchange，提问作者Surya Prasad Khanal