Vue JS | создать новый ключ + значение в динамически построенном массиве ($ ajax)

Question

То, что мы пытаемся выполнить, - это календарь в Vue.js, который получает значения с помощью вызова $ ajax.После этого я хотел бы манипулировать некоторыми из данных детей в vue.js.

Я трачу 2 часа +, чтобы найти потенциальный метод для использования этого, однако я не могу найти способ нацелить свойство вдинамические потомки объекта данных.

Последнее, что я попробовал, - это использование вызова $ refs, эта сортира делает то, что мне нужно.Но я думаю, что не могу манипулировать данными детей таким образом.

Мой объект vue выглядит сейчас так:

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

    });

И мой шаблон выглядит так:

И мой массив данных выглядит так:

есть ли способ, которым яможет установить свойство new что-то вроде:

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;

Было бы здорово иметь его в наблюдателе (поэтому, если какие-либо значения меняются, он выполняет построение / вычисление ключа массиваеще раз)

Answer 1

Учитывая, что app.calendar.events это массив ..

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

    });

Я добавил в ваш ответ вызов метода с именем addNewData. Я добавил этот метод в объект методов. Он делает map для массива событий, и для каждого события вы можете добавить определенное свойство. Он вернет массив с добавленным свойством. Больше информации на карте здесь

Answer 2

Vue.set( target, key, value ) Аргументы:

{Object | Array} target

{string | number} ключ

{any} значение

Возвращает:установить значение.

Использование:

Добавляет свойство к реактивному объекту, гарантируя, что новое свойство также является реактивным, поэтому запускает обновления просмотра.Это необходимо использовать для добавления новых свойств в реактивные объекты, поскольку Vue не может обнаружить обычные добавления свойств (например, this.myObject.newProperty = 'hi').

Целевой объект не может быть экземпляром Vue или корневым объектом данных экземпляра Vue..

Vue Docs

Answer 3

2 проблемы с вашим кодомиспользуйте Vue.set для добавления нового свойства или вставьте значение в массив.Подробнее об этом здесь .Одно замечание: вы не можете добавлять свойства данных верхнего уровня, используя Vue.set.