我的資料結構：
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" }
那么它們怎么是未定義的呢？有人能幫忙嗎？
uj5u.com熱心網友回復：
你不需要使用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" },
]
}
};
}
};
用戶界面：
<ul>
<li v-for="item in data.OBJs" :key="item">{{item.imageUrl}}</li>
</ul>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/453639.html
標籤：javascript 数组 目的 Vuejs2 特性
下一篇：需要用一個ArrayList來存盤物件，賦值需要我用一個ArrayList，苦苦的從ArrayList中呼叫物件的方法