JS - Object属性不接受赋值，而只获取数组的最后一个值
JS - Object属性不接受赋值，而只获取数组的最后一个值
提问于 2019-12-06 00:36:58
我有一个对象数组，每个对象都有一个id列表，如下所示：
objects: [
{
ids: [1,2],
name: 'alpha'
},
{
ids: [2,3],
name: 'bravo'
}
]我想将它们全部列出，比如对于每个单个id，即1、2或3，我在其ids属性中列出了包含该id的所有对象，并为每个列出的对象创建一个名为id的属性来保存该单个id，如下所示：
single id array: [1, 2, 3]
id = 1 => [alpha (id = 1)]
id = 2 => [alpha (id = 2), bravo (id = 2)]
id = 3 => [bravo (id = 3)]但是当我运行它时，所有列出的对象只获取其ids中的最后一个id，即2或3，尽管我遍历了单个id数组1, 2, 3并分配了每个id。
single id array: [1, 2, 3]
id = 1 => [alpha (id = 2)]
id = 2 => [alpha (id = 2), bravo (id = 3)]
id = 3 => [bravo (id = 3)]下面是一个示例：
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
listData: [
{
ids: [1,2],
name: 'alpha'
},
{
ids: [1,2],
name: 'bravo'
},
{
ids: [1,2,3],
name: 'gamma'
},
{
ids: [3,4],
name: 'delta'
}
],
detailData: []
},
created() {
var ids = [];
this.listData.forEach(data => {
data.ids.forEach(id => {
if(!ids.includes(id)) ids.push(id);
})
})
ids.forEach(id => {
this.listData.forEach(data => {
if(data.ids.includes(id)) {
var obj = data;
obj.id = id;
this.detailData.push(obj);
}
})
})
}
})<script src="https://unpkg.com/vue"></script>
<div id="app">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr v-for="(data, idx) in detailData">
<td>{{ data.id }}</td>
<td>{{ data.name }}</td>
</tr>
</tbody>
</table>
</div>
我不知道这是为什么或者是怎么发生的。希望你们能找出问题，给我解释一下。非常感谢!
对不起，我的英语不好。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-12-06 00:52:16
我认为你的问题是，对象是通过引用传递的，当你向detailData添加一个对象时，它是对稍后要更改的对象的引用。如果在将对象添加到detailData之前复制该对象，我认为可以解决您的问题：
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
listData: [
{
ids: [1,2],
name: 'alpha'
},
{
ids: [1,2],
name: 'bravo'
},
{
ids: [1,2,3],
name: 'gamma'
},
{
ids: [3,4],
name: 'delta'
}
],
detailData: []
},
created() {
var ids = [];
this.listData.forEach(data => {
data.ids.forEach(id => {
if(!ids.includes(id)) ids.push(id);
})
})
ids.forEach(id => {
this.listData.forEach(data => {
if(data.ids.includes(id)) {
var obj = data;
obj.id = id;
this.detailData.push({...obj}); // ... Makes a shallow copy of the object
}
})
})
}
})<script src="https://unpkg.com/vue"></script>
<div id="app">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr v-for="(data, idx) in detailData">
<td>{{ data.id }}</td>
<td>{{ data.name }}</td>
</tr>
</tbody>
</table>
</div>
注意:这只会创建一个浅拷贝，这意味着如果你的id在一个嵌套的对象中，它将无法工作。请参阅此answer。
如果您不想创建副本，您可以只创建一个具有所需属性的对象：
if(data.ids.includes(id)) {
var obj = {id: id, name: data.name};
this.detailData.push(obj);
}如果您想要更深的副本，也可以使用JSON：
if(data.ids.includes(id)) {
var obj = JSON.parse(JSON.stringify(data));
obj.id = id;
this.detailData.push(obj);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59205251
复制相关文章
相似问题
PHP循环只获取js中的最后一个值。
Ruby数组只存储最后一个值，而不是所有值。
只获取最后一个元素- JS
方法onChange只获取最后一个数组值
IOS/ object :获取数组中对象的属性值
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
