javascript - Vue JS | 在动态构建的数组 ($ajax) 中创建新的键 + 值
问题描述
我们正在尝试完成的是 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
. 我已经在方法对象中添加了这个方法。它对map
事件数组执行一个操作,并且您可以为每个事件添加一个特定属性。它将返回一个添加了属性的数组。地图上的更多信息在这里
推荐阅读
- mysql - 按列对查询中的数据进行排序
- excel - 根据标准显示排名
- vb.net - Crystal Reports 折线图颜色突出显示有时不起作用
- javascript - 如何访问子节点 Firestore——未定义 forEach 函数
- wordpress - 在 wordpress 中创建砌体网格
- azure - 如何使用 azure 函数进入正在运行的 Azure 容器实例的 /etc/hosts 文件?
- c - makefile上的致命错误,需要了解问题
- jquery - 如何在此手风琴中获取元素以在第二次单击它们后切换和隐藏内容?
- c - fork() 返回正数而不是零
- c# - 使用带有动态匿名对象的 NHibernate 在 GroupBy 查询中进行选择