VueJS |在动态构建的数组中创建新键 + 值 ($ajax)

Question

我们试图完成的是 Vue.js 中的日历，日历使用 $ajax 调用获取值。在此之后，我想操作 vue.js.

中的一些 childrens 数据

我花了 2 小时以上来找到使用它的潜在方法，但是我似乎无法找到在数据 children 的动态 children 中定位属性的方法 object .

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

我的 vue object 目前看起来像这样：

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;

将它放在观察器中会很棒（因此，如果任何值发生变化，它会再次执行数组键的 building/calculating）

Answer 1

您的代码有 2 个问题

1.You 正在使用 app.calendar 设置 ajax 响应的值，您应该使用 this.calendar=response

2.Second 你需要使用 Vue.set 添加一个新的属性，或者实际插入一个值到一个数组中。有关此 here 的更多信息。请注意，您不能使用 Vue.set.

添加顶级数据属性

Answer 2

Vue.set( target, key, value ) Arguments:

{Object | Array} target

{string | number} key

{any} value

Returns: the set value.

Usage:

Adds a property to a reactive object, ensuring the new property is also reactive, so triggers view updates. This must be used to add new properties to reactive objects, as Vue cannot detect normal property additions (e.g. this.myObject.newProperty = 'hi').

The target object cannot be a Vue instance, or the root data object of a Vue instance.

Vue Docs

Answer 3

鉴于 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，对于每个事件，您可以添加特定的属性。它将 return 添加了属性的数组。有关地图的更多信息 here

VueJS |在动态构建的数组中创建新键 + 值 ($ajax)

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

javascript

ajax

children

vue.js