我使用foreach
根据id构建一个数据数组。最初一切都很顺利,但发生了一些事情。我认为我错误地使用了 forEach
。但是在我 console.log
数组之后,它看起来很好。这是我的代码。
const Thread = Vue.component('threadpage', function(resolve) {
$.get('templates/thread.html').done(function(template) {
resolve({
template: template,
data: function() {
return {
data: {
title: "Data Table Thread",
count: {},
list: {}
}
};
},
methods: {
GetData: function() {
var data = {
username: "example-username",
data: {
page: 0,
length: 10,
schedule: "desc"
}
};
var args = {
"data": JSON.stringify(data)
};
var params = $.param(args);
var url = "http://example-url";
var vm = this;
DoXhr(url, params, function(response) {
count = JSON.parse(response).data.count;
vm.data.count = count;
var result = [];
result_data = JSON.parse(response).data.data;
result_data.forEach(function(item) {
//console.log(item);
result[item._id] = {
_id: item._id
};
});
vm.data.list = result;
console.log(result);
});
}
},
created: function() {
this.GetData();
}
});
});
});
就像在 vuejs.org 中一样,我使用了 v-for
,如下所示:
<tbody v-for="item in data.list">
<tr>
<td>
{{ item._id }}
</td>
</tr>
</tbody>
结果不显示任何内容。我的模板语法有问题吗?代码有什么问题吗?
最佳答案
您将结果定义为数组。
var result = [];
但是您通过索引向其中添加对象,我怀疑这并不完全是您想要的。如果您的 _id
值是字母数字,或者不按顺序排列,这将导致一个非常奇怪的数组。
result[item._id] = {
_id : item._id
};
我希望您想要 var result = {}
或
result.push({_id: item._id})
如果您想要一个数组,您的代码应如下所示:
var result = [];
result_data = JSON.parse(response).data.data;
result_data.forEach(item => result.push({_id: item._id}))
vm.data.list = result
此外,您正在迭代 tbody
标记。您可能想要迭代 tr
。
<tbody>
<tr v-for="item in data.list">
<td>
{{ item._id }}
</td>
</tr>
</tbody>
关于javascript - 管理从方法到模板语法的数据数组 Vue,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45385016/