Currently, our goal is to implement a calendar using Vue.js where the values are fetched via an $ajax call. Following this, I aim to manipulate some of the children's data in Vue.js.
I've spent over 2 hours trying to discover a suitable method for achieving this task. However, I'm struggling to figure out how to target a property within the dynamic children of the data object.
My latest attempt involved using a '$refs' call, which somewhat accomplishes what I need. Yet, I believe I cannot effectively manipulate the children's data this way.
As of now, my Vue object looks like this:
var app = new Vue({
el: '#aankomende-week',
data: {
calendar: ''
},
methods: {
deleteAll(){
app.calendar = '';
},
callAJAX() {
$.post(
'/ajax/calendar',
'',
function (response) {
app.calendar = response;
},
'json'
);
console.log(this.$refs);
}
},
created: function(){
this.callAJAX();
}
});
Here is a snapshot of my template:
https://i.sstatic.net/sG8L1.jpg
And my data array looks like this:
https://i.sstatic.net/pdXer.png
Is there a way to create a new property such as:
this.calendar.events.[child].totalTime = this.calendar.events.[child].end - this.calendar.events.[child].start;
this.calendar.events.[index].totalTime = this.calendar.events.[index].end - this.calendar.events.[index].start;
this.calendar.events.[anything].totalTime = this.calendar.events.[anything].end - this.calendar.events.[anything].start;
It would be beneficial to have this implemented within a watcher so that if any values change, it recalculates the array key accordingly.