Search code examples
javascriptajaxvue.jschildren

Vue JS | create new key + value, in a dynamic builded array ($ajax)

What we are trying to accomplish is an calender in Vue.js, the calender gets the values using an $ajax call. After this i would like to manipulate some of the childrens data in vue.js.

I spend 2 hours+ to find a potential method to use this, However i cant seem to find the way to target a property in the dynamic children of the data object.

The last thing i tried is using a '$refs' call, this sorta is doing the thing i need. But i think i cant manipulate the childrens data this way.

My vue object is looking like this at the moment:

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();
        }

    });

And my template is like this:

enter image description here

And my data array is looking like:

enter image description here

is there a way i can set a new property something like:

this.calendar.events.[child].totalTime = this.calender.events.[child].end - this.calender.events.[child].start;

this.calender.events.[index].totalTime = this.calender.events.[index].end - this.calender.events.[index].start;

this.calender.events.[anything].totalTime = this.calender.events.[anything].end - this.calender.events.[anything].start;

It would be great to have it in a watcher (So if any values change, it does the building/calculating of the array key again)

Solution

  • Given that app.calendar.events is an array..

    var app = new Vue({
        el: '#aankomende-week',
        data: {
            calendar: ''
        },
        methods: {
            deleteAll(){
                app.calendar = '';
            },
            callAJAX() {
                $.post(
                    '/ajax/calendar',
                    '',
                    function (response) {
                        app.calendar = response;
                        this.addNewData();
                    },
                    'json'
                );
            },
            addNewData() {
                app.calendar.events.map(function(event) {
                    event.data = 'some value';
                });
            }
        },
        created: function(){
            this.callAJAX();
        }

    });

    I've added a method call in your response, named addNewData. I've added this method in the methods object. It does a map on the events array and for each event you can add a certain property. It will return an array with the property added. More info on map here