Vue.js is new to me and I'm still trying to grasp its concepts (please ignore the indentation in the code)
methods:{
getdata() {
if (this.myPage.month === 5) {
axios.get("http://www.amock.io/api/maymock").then(response => {
this.Month = response.data.checkInData.Month;
this.Stat = response.data.checkInData.CheckedInStat;
this.TotalTarget = response.data.checkInData.TotalTarget;
this.$emit("TotTarget", this.TotalTarget);
this.TargetForMonth = response.data.checkInData.CurrentAchieved;
this.$emit("TotCount", this.TargetForMonth);
})
}
if (this.myPage.month === 4) {
axios.get("http://www.amock.io/api/aprilmock").then(response => {
this.Month = response.data.checkInData.Month;
this.Stat = response.data.checkInData.CheckedInStat;
this.TotalTarget = response.data.checkInData.TotalTarget;
this.$emit("TotTarget", this.TotalTarget);
this.TargetForMonth = response.data.checkInData.CurrentAchieved;
this.$emit("TotCount", this.TargetForMonth);
})
}
},
},
computed: {
attributes() {
this.getdata();
let checkindata = [];
if (this.Click === 0) {
var entry = new Object();
(entry.highlight = "red"), (entry.dates = new Date());
checkindata.push(entry);
for (var day = 0; day < this.Stat.length; ++day) {
entry = new Object();
(entry.highlight = this.Stat[day] === 0 ? "red" : "green"),
(entry.dates = new Date(2020, this.Month, day + 1));
checkindata.push(entry);
}
}
if (this.Click === 1) {
var entry1 = new Object();
(entry.highlight = "green"), (entry.dates = new Date());
checkindata.push(entry1);
for (day = 0; day < this.Stat.length; ++day) {
entry1 = new Object();
(entry.highlight = this.Stat[day] === 0 ? "red" : "green"),
(entry.dates = new Date(2020, this.Month, day + 1));
checkindata.push(entry1);
}
}
return checkindata;
}
},
data() {
return {
myPage: {},
Stat: [],
Month: null,
TotalTarget: null,
TargetForMonth: null,
responded: null
};
}
I've integrated a v-calendar plugin and the data is being passed to the Calendar through the attributes function. However, I want the getdata method to fetch data from the provided link only when the variable myPage.month changes, and it should do so just once. The method currently runs infinitely, causing issues. Is there a way to resolve this?