Vue应用中JavaScript对象为何仅渲染最后一个重复属性？

为什么对象只显示最后一个元素？ #

JavaScript 对象的属性键（key）必须是唯一的，你在定义对象时重复使用了id作为键：

images.value = {
  id: 1,
  id: 2,
  id: 3,
};

每一次赋值id: x都会覆盖之前的id键值，最终这个对象实际只有{ id: 3 }这一个有效属性，所以Vue渲染时只会显示最后一个元素。

正确实现方式 #

如果你想存储多个带id的条目，推荐使用数组（这是处理一组同类型数据的常规方式）：

// 修改onMounted里的赋值逻辑
onMounted(()=>{
  images.value = [
    { id: 1 },
    { id: 2 },
    { id: 3 }
  ];
})

这样渲染后会显示完整的数组内容：[{ "id": 1 }, { "id": 2 }, { "id": 3 }]。

如果一定要用对象存储，可以给每个键设置唯一名称：

images.value = {
  id1: 1,
  id2: 2,
  id3: 3
};

渲染后会显示：{ "id1": 1, "id2": 2, "id3": 3 }。

内容的提问来源于stack exchange，提问作者jdost_26