我们要完成的是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
的方法调用。我在方法对象中添加了这个方法。它在events数组上执行map
,并且对于每个事件,您可以添加某个属性。它将返回一个添加了属性的数组。更多信息在地图上here
您的代码有2个问题
1.你使用app.calendar
设置ajax响应的值,你应该使用this.calendar=response
2.第二,你需要使用Vue.set
添加一个新属性,或者实际在数组中插入一个值。关于这个here的更多信息。关于这一点,您不能使用Vue.set添加顶级数据属性。
Vue.set( target, key, value )
参数:
{Object | Array}
目标
{string | number}
关键
{any}
价值返回:设置值。
用法:
向反应对象添加属性,确保新属性也是被动的,因此触发查看更新。这必须用于向反应对象添加新属性,因为Vue无法检测正常的属性添加(例如
this.myObject.newProperty = 'hi'
)。目标对象不能是Vue实例,也不能是Vue实例的根数据对象。