为什么下面的对象只打印为最后一个元素，而不打印为整个对象？我认为它会打印为{ ID:1， ID:2， ID:3， }
https://codepen.io/kiggs1881/pen/JjwGKQG个
<template>
<div id="app">
<h2>{{images}}</h2>
</div>
</template>
<script>
import {ref, onMounted, watch} from 'vue'
export default {
setup(){
const images = ref({})
onMounted(()=>{
images.value = {
id: 1,
id: 2,
id: 3,
};
})
return {
images
}
}
};
您提供的对象只打印最后一个元素的原因是对象键必须是唯一的.在定义以下内容时:
{
id: 1,
id: 2,
id: 3,
}
它等同于:
{
id: 3,
}
设置具有相同名称的多个关键点时，只有最后一个关键点保留在对象中.前面的内容将被覆盖.
如果您打算为id保留多个值，则可能需要一个数组:
images.value = [
{id: 1},
{id: 2},
{id: 3},
];
然后，要显示它们，您可以在模板中使用循环:
<template>
<div id="app">
<h2 v-for="image in images" :key="image.id">{{ image.id }}</h2>
</div>
</template>