Блог

Чего мы пытаемся достичь, так это календаря в 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();
        }

    });
  

И мой шаблон выглядит следующим образом:

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

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

 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;
  

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

Учитывая, что 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 . Я добавил этот метод в объект methods. Он выполняет map над массивом событий, и для каждого события вы можете добавить определенное свойство. Он вернет массив с добавленным свойством. Больше информации о карте здесь

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

{Object | Array} цель

{string | number} Клавиша

{any} значение

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

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

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

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

Документы Vue

В вашем коде 2 проблемы

1. Вы устанавливаете значение ответа ajax с помощью app.calendar , вы должны использовать this.calendar=response

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