如何在对象 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>

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

How to loop array inside object vue.js

javascript

api

loops

for-loop

vue.js