如何在对象vue.js中循环数组

Question

我有一个关于使用Vue.js.中的GET获取从API检索的一些数据的循环的问题

这是来自路由的响应：

"data": {
"Orders": [
{
"OrderID": 1,
"Ordered_Products": {
"items": [
{
"id": 2,
"title": "Hildegard Prohaska",
"quantity": 5,
},
{
"id": 3,
"title": "Odell Zieme",
"quantity": 3,
}
]
},
"Pay_method": 1,
//stuff
},
{
"OrderID": 1,
"Ordered_Products": {
"items": [
{
"id": 2,
"title": "Hildegard Prohaska",
"quantity": 2,
},
{
"id": 3,
"title": "Odell Zieme",
"quantity": 1,
}
]
},
"Pay_method": 2,
//stuff
}
]
}

这是我的收获：

methods: {
fetchOrders () {
fetch('https://myapidomine.com')
.then(res => res.json())
.then(res => {
this.orders = res.data.Orders
})
}
}

我是这样使用的：

<v-card flat v-for="order in orders" :key="order.OrderID">
<v-layout row wrap">
<v-flex xs12 md4>
<div class="caption grey--text">PayMethod</div>
<div>{{ order.Pay_method }}</div>
</v-flex> 

如果我访问Orders内的密钥，如{{order.Pay_method}}，工作正常，该循环工作正常，但我需要循环Ordered_Products.items内的项目，并使用title等。

如果我这样做：

<v-list-item-title xs12 md3>{{order.Ordered_Products.items[0].title}}

我得到的数据很好，但当然只是第一个产品的数据，但不确定如何循环数据

提前谢谢你，(我是vue的新手(

Answer 1

我看不到你的全部代码，但这样的东西可以：

<v-list-item-title xs12 md3 :key="index" v-for="(item, index) in order.Ordered_Products.items">
{{item.title}}
</v-list-item-title>