javascript - Vue.js |在动态构建的数组中创建新的键+值($ajax)

Question

我们想要完成的是 Vue.js 中的日历，日历使用 $ajax 调用获取值。之后我想在 vue.js 中操作一些子级数据。

我花了 2 个小时以上来找到一种使用它的潜在方法，但是我似乎无法找到以数据对象的动态子对象中的属性为目标的方法。

我尝试的最后一件事是使用“$refs”调用，这正在做我需要的事情。但我认为我不能以这种方式操纵 child 的数据。

我的 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;

将它放在观察者中会很棒(因此，如果任何值发生变化，它会再次构建/计算数组键)

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 here