如何在模板上定义的循环期间显示 Vue 数据中数组内对象的属性？

Question

我的数据结构：

data: {
    OBJs: [ 
        { "imageUrl": "site/image1.png", "name": "name1" }, 
        { "imageUrl": "site/image2.png", "name": "name2" }, 
        { "imageUrl": "site/image3.png", "name": "name3" }, 
        { "imageUrl": "site/image4.png", "name": "name4" }, 
        ]
}

然后在模板上

<div v-for="index in OBJs.length" :key="index">
    {{OBJs[index].imageUrl}}
</div>

但是我一直收到这个错误。

如果我只渲染 OBJs[index] 是这样的：

<div v-for="index in OBJs.length" :key="index">
    {{OBJs[index]}}
</div>

...我得到了所有对象！

 { "imageUrl": "site/image1.png", "name": "name1" }
 { "imageUrl": "site/image2.png", "name": "name2" } 
 { "imageUrl": "site/image3.png", "name": "name3" } 
 { "imageUrl": "site/image4.png", "name": "name4" }

那么为什么它们是未定义的？有人能帮忙吗？

Answer 1

你不需要使用 length

只是 OBJs - 然后你将在每次迭代中得到数组项

如果你有这样的结构：

export default {
    data() {
        return {
            data: {
                OBJs: [ 
                    { "imageUrl": "site/image1.png", "name": "name1" }, 
                    { "imageUrl": "site/image2.png", "name": "name2" }, 
                    { "imageUrl": "site/image3.png", "name": "name3" }, 
                    { "imageUrl": "site/image4.png", "name": "name4" }, 
                    ]
            }
        };
    }
};

UI:

<ul>
    <li v-for="item in data.OBJs" :key="item">{{item.imageUrl}}</li>
</ul>

如何在模板上定义的循环期间显示 Vue 数据中数组内对象的属性？

How to show a property from an object inside an array in Vue data during a loop defined on the Template?

javascript

arrays

properties

object

vuejs2

如何在模板上定义的循环期间显示 Vue 数据中数组内对象的 属性？

How to show a property from an object inside an array in Vue data during a loop defined on the Template?

javascript

arrays

properties

object

vuejs2

如何在模板上定义的循环期间显示 Vue 数据中数组内对象的属性？