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，并且可以为每个事件添加特定属性。它将返回一个添加了属性的数组。有关地图here

的更多信息

Answer 2

您的代码有2个问题

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

2。第二，您需要使用Vue.set添加一个新属性，或实际上将一个值插入数组。有关此here的更多信息。关于这一点，您不能使用Vue.set添加顶级数据属性。

Answer 3

Vue.set( target, key, value )参数：

{Object | Array}目标

{string | number}键

{any}值

返回：   设置值。

用法：

向反应对象添加属性，确保新属性为   也是反应性的，因此触发视图更新。这必须用于添加新   属性，因为Vue无法检测到正常属性   添加内容（例如this.myObject.newProperty = 'hi'）。

目标对象不能是Vue实例，也不可以是   Vue实例。

Vue Docs

Vue JS |在动态构建的数组中创建新的键+值（$ ajax）

3 个答案: