Javascript 从方法到模板语法Vue管理数据数组
我使用Javascript 从方法到模板语法Vue管理数据数组,javascript,vue.js,vuejs2,vue-component,Javascript,Vue.js,Vuejs2,Vue Component,我使用foreach构建了一个基于id的数据数组。最初一切都很顺利,但发生了一些事情。我想我没有正确地使用forEach的。但是在Iconsole.log数组之后,它看起来很好。这是我的密码 const Thread = Vue.component('threadpage', function(resolve) { $.get('templates/thread.html').done(function(template) { resolve({ template: te
foreach
构建了一个基于id的数据数组。最初一切都很顺利,但发生了一些事情。我想我没有正确地使用forEach的。但是在Iconsole.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>
{{item.\u id}}
结果没有显示任何内容。我的模板语法有问题吗?代码有什么问题 您需要修改result[item.\u id]
fromresult[item.\u id]={\u id:item.\u id}代码>至<代码>结果[项目编号]=项目编号代码>
因此,最终forEach区块将是:
result_data.forEach(function(item) {
//console.log(item);
result[item._id] = item._id
});
然后在模板中,您将能够获得值
<tbody v-for="item in data.list">
<tr>
<td>
{{ item._id }}
</td>
</tr>
</tbody>
{{item.\u id}}
将结果定义为数组
var result = [];
但是你可以通过索引向它添加对象,我怀疑这并不是你想要的。如果您的\u 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>
{{item.\u id}}
我使用了result.push,但显示错误“无法读取未定义的属性'push'”@userpr我不确定当您在上面几行定义它时,这怎么可能,除非您以某种方式替换它。最后,我的数据也出现了!!非常感谢先生:)谢谢你的回答,但结果是对象:{}。但还是没有表现出来