- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在尝试将 google OAuth api 与 Vue.js 结合使用。我使用并修改了谷歌提供的示例代码。但是当我点击“授权”按钮时,控制台返回:
Uncaught TypeError: Cannot read property 'init' of undefined
at Vue$3.initClient (vueAuth.js:24)
at Vue$3.boundFn [as initClient] (vue.js:196)
at Vue$3.handleClientLoad (vueAuth.js:20)
at boundFn (vue.js:196)
at invoker (vue.js:2006)
at HTMLButtonElement.fn._withTask.fn._withTask (vue.js:1804)
这是我的代码
索引.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>管理画面</title>
</head>
<body>
<p>Google Sheets API Quickstart</p>
<!--Add buttons to initiate auth sequence and sign out-->
<div id="app">
<button @click="handleClientLoad">Authorize</button>
{{ memberlist }}
</div>
<script async defer src="https://apis.google.com/js/api.js"></script>
<script src="https://unpkg.com/vue"></script>
<!-- vueAuth.js is my code -->
<script src="vueAuth.js"></script>
</body>
</html>
vueAuth.js
// Client ID and API key from the Developer Console
const CLIENT_ID = '/*my client id */';
// Array of API discovery doc URLs for APIs used by the quickstart
const DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/sheets/v4/rest"];
// Authorization scopes required by the API; multiple scopes can be
// included, separated by spaces.
const SCOPES = "https://www.googleapis.com/auth/spreadsheets.readonly";
let vm = new Vue({
el: '#app',
data: {
memberlist: ''
},
methods: {
handleClientLoad: function () {
gapi.load('client:auth2', this.initClient(this));
},
initClient: function (vue) {
gapi.client.init({
discoveryDocs: DISCOVERY_DOCS,
clientId: CLIENT_ID,
scope: SCOPES
}).then(function () {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(vue.updateSigninStatus);
// Handle the initial sign-in state.
vue.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
vue.handleAuthClick();
});
},
updateSigninStatus: function (isSignedIn) {
if (isSignedIn) {
this.loadSheetsApi();
} else {
return;
}
},
handleAuthClick: function (event) {
gapi.auth2.getAuthInstance().signIn();
},
handleSignoutClick: function (event) {
gapi.auth2.getAuthInstance().signOut();
},
loadSheetsApi: function () {
var discoveryUrl =
'https://sheets.googleapis.com/$discovery/rest?version=v4';
gapi.client.load(discoveryUrl).then(this.listMajors);
},
listMajors: function () {
gapi.client.sheets.spreadsheets.values.get({
spreadsheetId: '/* my sheet id */',
range: '/* target range */',
}).then(function (response) {
this.memberlist = response.result;
})
}
}
})
我想知道为什么 gapi.client.init 不可用。我应该如何更改我的代码以启用 gapi?
最佳答案
以防其他人正在寻找这个。这就是我为我的添加到日历按钮所做的
public/index.html在头部添加脚本
<head>
...
<script async defer src="https://apis.google.com/js/api.js"></script>
...
</head>
模板:
<ion-button @click="addToCalendar(item)">
Add to Calendar <ion-icon :icon="calendarClearOutline"></ion-icon>
</ion-button>
脚本:
// after imports
var gapi = window.gapi;
var CLIENT_ID = "_YOUR_CLIENT_ID_";
var API_KEY = "_YOUR_API_KEY_";
var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];
var SCOPES = "https://www.googleapis.com/auth/calendar";
// in methods
addToCalendar(event) {
gapi.load("client:auth2", () => {
console.log("gapi loaded", gapi.client);
gapi.client.init({
apiKey: API_KEY,
clientId: CLIENT_ID,
discoveryDocs: DISCOVERY_DOCS,
scope: SCOPES
}).then(() => {
const gcEvent = {
"summary": event.eventName,
"location": event.venue,
"start": {
"dateTime": moment(event.start).utc().format("YYYY-MM-DDTHH:mm:ss.SSS[Z]"),
"timeZone": "Africa/Johannesburg"
},
"end": {
"dateTime": moment(event.end).utc().format("YYYY-MM-DDTHH:mm:ss.SSS[Z]"),
"timeZone": "Africa/Johannesburg"
},
"reminders": {
"useDefault": false,
"overrides": [
{"method": "email", "minutes": 24 * 60},
{"method": "popup", "minutes": 10}
]
}
};
var request = gapi.client.calendar.events.insert({
'calendarId': 'primary',
'resource': gcEvent,
});
// window object is undefined inside `execute`/
const rootWindow = window;
request.execute(gcEvent => {
rootWindow.open(gcEvent.htmlLink);
})
})
})
}
仅使用 moment(event.start).utc().format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")
如果您的 dates are not ISO
Grant Singleton 的 react tutorial帮助很大。
关于javascript - 如何使用 Vue.js 初始化 google OAuth 客户端?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48810139/
我是 Spring 新手,这就是我想要做的事情: 我正在使用一个基于 Maven 的库,它有自己的 Spring 上下文和 Autowiring 字段。 它的bean配置文件是src/test/res
我在我的测试脚本中有以下列表初始化: newSequenceCore=["ls", "ns", "*", "cm", "*", "ov", "ov", "ov", "ov", "kd"] (代表要在控
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Class construction with initial values 当我查看 http://en.
我得到了成员变量“objectCount”的限定错误。编译器还返回“ISO C++ 禁止非常量静态成员的类内初始化”。这是主类: #include #include "Tree.h" using n
我有如下所示的a.h class A { public: void doSomething()=0; }; 然后我有如下所示的b.h #include "a.h" class b: publi
我需要解析 Firebase DataSnapshot (一个 JSON 对象)转换成一个数据类,其属性包括 enum 和 list。所以我更喜欢通过传递 DataSnapshot 来手动解析它进入二
我使用 JQuery 一段时间了,我总是使用以下代码来初始化我的 javascript: $(document).ready( function() { // Initalisation logic
这里是 Objective-C 菜鸟。 为什么会这样: NSString *myString = [NSString alloc]; [myString initWithFormat:@"%f", s
我无法让核心数据支持的 NSArrayController 在我的代码中正常工作。下面是我的代码: pageArrayController = [[NSArrayController alloc] i
我对这一切都很陌生,并且无法将其安装到我的后端代码中。它去哪里?在我的页脚下面有我所有的 JS? 比如,这是什么意思: Popup initialization code should be exec
这可能是一个简单的问题,但是嘿,我是初学者。 所以我创建了一个程序来计算一些东西,它目前正在控制台中运行。我决定向其中添加一个用户界面,因此我使用 NetBeans IDE 中的内置功能创建了一个 J
我有 2 个 Controller ,TEST1Controller 和 TEST2Controller 在TEST2Controller中,我有一个initialize()函数设置属性值。 如果我尝
据我所知, dependentObservable 在声明时会进行计算。但如果某些值尚不存在怎么办? 例如: var viewModel ={}; var dependentObservable1 =
我正在阅读 POODR 这本书,它使用旧语法进行默认值初始化。我想用新语法实现相同的功能。 class Gear attr_reader :chainring, :cog, :wheel de
我按照 polymer 教程的说明进行操作: https://www.polymer-project.org/3.0/start/install-3-0 (我跳过了可选部分) 但是,在我执行命令“po
很抱歉问到一个非常新手的Kotlin问题,但是我正在努力理解与构造函数和初始化有关的一些东西。 我有这个类和构造函数: class TestCaseBuilder constructor(
假设我们有一个包含 30 列和 30 行的网格。 生命游戏规则简而言之: 一个小区有八个相邻小区 当一个细胞拥有三个存活的相邻细胞时,该细胞就会存活 如果一个细胞恰好有两个或三个活的相邻细胞,那么它就
我是 MQTT 和 Android 开放附件“AOA” 的新手。在阅读教程时,我意识到,在尝试写入 ByteArrayOutputStream 类型的变量之前,应该写入 0 或 0x00首先到该变量。
我有 2 个 Controller ,TEST1Controller 和 TEST2Controller 在TEST2Controller中,我有一个initialize()函数设置属性值。 如果我尝
我有一个inotify /内核问题。我正在使用“inotify” Python项目进行观察,但是,我的问题仍然是固有的关于inotify内核实现的核心。 Python inotify项目处理递归ino
我是一名优秀的程序员,十分优秀!