I have been working on a Vue module that allows users to add events to Google Calendar easily. Once a user signs in, there is a listener in place to call a method for adding an event to the calendar. To access the gapi functionalities required for this task, I am utilizing a Vue library that can be found at https://github.com/cedpoilly/vue-gapi. However, I've encountered an issue where the addEvent method runs multiple times when trying to add another event after successfully adding one for the first time. This results in duplicate events being added. You can see the issue in action here: https://codesandbox.io/s/infallible-chaum-dg7nf
<template>
<div class="row">
<div class="col-md-6 ml-5 mt-3">
<b-form>
<b-form-group id="input-group-2" label="Add to" label-for="input-2">
<b-button variant="outline-primary" @click="handleAuthClick">
<b-icon icon="calendar3" aria-hidden="true"></b-icon> Google Calendar
</b-button>
</b-form-group>
</b-form>
</div>
</div>
</template>
<script>
export default {
data(){
return {
show: true,
disabled: false,
items: '',
event: '',
gapi: null,
partnerEmail: '',
listner: null,
}
},
methods: {
onSubmit(evt) {
evt.preventDefault();
//alert(JSON.stringify(this.form));
//this.meetingEdit(this.form);
this.$router.push({ path: '/portal/meetingEdit/' })
},
deleteMeeting() {
this.$router.push({ path: '/portal/meetingDelete/' })
},
addEvent() {
var startDate = new Date(this.form.MeetingTime);
var msDuration = (Number(this.form.Duration.split(':')[0]) * 60 * 60 + Number(this.form.Duration.split(':')[1]) * 60 + Number(this.form.Duration.split(':')[2])) * 1000;
var endDate = new Date(startDate.getTime() + msDuration);
var isoStartDate = new Date(startDate.getTime() - new Date().getTimezoneOffset() * 60 * 1000).toISOString().split(".")[0];
var isoEndDate = new Date(endDate.getTime() - (new Date().getTimezoneOffset()) * 60 * 1000).toISOString().split(".")[0];
var InviteesArr = [];
var tempArr = this.form.Invitees.trim().split(',');
for (var email of tempArr) {
if (email !== "") {
var obg = { 'email': email };
InviteesArr.push(obg);
}
}
var partner = { 'email': this.partnerEmail };
InviteesArr.push(partner);
this.event = {
'summary': this.form.Topic,
'location': this.form.InviteLink,
'description': this.form.inviteDes,
'start': {
'dateTime': isoStartDate,
'timeZone': this.form.Timezone
},
'end': {
'dateTime': isoEndDate,
'timeZone': this.form.Timezone
},
'attendees': InviteesArr,
'conferenceData': null,
};
this.$getGapiClient().then((gapi) => {
// gapi.sheets.spreadsheet.get(...)
var request = gapi.client.calendar.events.insert({
'calendarId': 'primary',
'conferenceDataVersion': 1,
'resource': this.event
});
request.execute( (event)=> {
console.log(event);
window.open(event.htmlLink, '_blank');
});
this.gapi.auth2.getAuthInstance().signOut();
this.gapi = null;
});
},
updateSigninStatus(bool) {
if (bool) {
console.log('login D');
this.addEvent();
} else {
console.log('not login');
}
},
handleAuthClick() {
this.$getGapiClient().then((gapi) => {
this.gapi = gapi;
this.listner = this.gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus);
this.updateSigninStatus(this.gapi.auth2.getAuthInstance().isSignedIn.get());
if (this.gapi.auth2.getAuthInstance().isSignedIn.get()) {
this.addEvent();
} else {
this.gapi.auth2.getAuthInstance().signIn();
}
});
}
}
}
</script>
However, each click on the button triggers the addEvent() method multiple times.