I get this error "Uncaught TypeError: Cannot read property 'setApiKey' of undefined" while working with youtube data api and vue.js. I am using vue-resource. I guess the "gapi.client.setApiKey" is not able to access the google api js library from inside vue instance. How can i rectify this. Please help. thanks in advance
<html>
<head>
<title>Learn Vue</title>
</head>
<body>
<div id="app">
<h1>{{videos}}</h1>
<input v-model="videos" v-on:keyup.enter="handleSubmit">
</div>
<script src="https://apis.google.com/js/client.js"></script>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-resource/dist/vue-resource.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
new Vue({
el: '#app',
data:{
videos:""
},
ready: function (){
gapi.client.setApiKey('myapikey');
gapi.client.load("youtube", "v3", function(){});
},
methods:{
handleSubmit:function(e){
e.preventDefault();
var request = gapi.client.youtube.search.list({
part: "snippet",
type: "video",
q: this.videos,
maxResults: 3,
order: "viewCount",
publishedAfter: "2015-01-01T00:00:00Z"
});
request.execute(function(response) {
console.log(response)
})
}
}
})
