vue 组件中的嵌套 v-for 循环答案

【问题标题】：Nested v-for loops in a vue-componentsvue 组件中的嵌套 v-for 循环
【发布时间】：2018-05-10 11:37:32
【问题描述】：

我正在尝试使用 vue.js 组件将以下数据（在 vue 实例中）显示为表格。
但我不确定如何访问数据。我尝试了嵌套的 v-for 循环。

输出表

装备名称 |服务时间
磨锯 | 2018-02-01 10:00:00
磨锯 | 2018-02-04 10:00:00

装备名称 |服务时间
杰克锤 | 2018-02-06 12:30:00

VUE 组件

    Vue.component('services', {
  props: ['value'],
  template: '<div>{{value.serviceTime}}</div>' 
})

new Vue({ 
  el: '#mydemo1',
  data: {
      "results": {
            "4": [
                {
                    "service": 4,
                    "serviceTime": "2018-02-01 10:00:00",
                    "usrname": "chris job",
                    "eqname": "mill saw",
                    "quantity": "3.00",
                    "rate": "20.00",
                    "total": "60.00",
                    "note": ""
                },
                {
                    "service": 4,
                    "serviceTime": "2018-02-04 10:00:00",
                    "usrname": "chris job",
                    "eqname": "mill saw",
                    "quantity": "3.00",
                    "rate": "20.00",
                    "total": "0.00",
                    "note": null
                }
            ],
            "34": [
                {
                    "service": 34,
                    "serviceTime": "2018-02-06 12:30:00",
                    "usrname": "chris job",
                    "eqname": "jack hammer",
                    "quantity": "0.00",
                    "rate": "20.00",
                    "total": "0.00",
                    "note": "Training"
                }
            ]

HTML

div id="mydemo1">
  <services v-for="invoice in results"
   v-for="items in invoice"
   v-for="details in items"
   v-bind:value="invoice"
   ></services>

建议？

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

你可以的

  <table v-for="(invoices, key) in results" :key="key">
        <tr>
            <th>Equp Name</th>
            <th>Service Time</th>
        </tr>
    <tr v-for="item in invoices" :key="item.serviceTime">
      <td>{{ item.eqname }}</td>
            <td>{{ item.serviceTime }}</td>
    </tr>
  </table>

你可以在https://codepen.io/ittus/pen/erMRNL查看我的演示

【讨论】：

【解决方案2】：

你应该这样做

<div id="mydemo1">
  <services v-for="invoice in results"
   v-for="items in invoice">
     <div v-for="details in items">Do your stuff ....</div>
  </services>
</div>

【讨论】：

【解决方案3】：

是的，您可以嵌套 v-for 循环，但您必须将它们放在不同的元素中（例如 div）

顺便说一句，您不需要 3 个v-for 循环来以您想要的方式显示数据：

Vue.component('services', {
  template: '<div style="display:inline">{{value.serviceTime}}</div>',
  props: ['value']

})

new Vue({
  el: '#app',
  data: {
    "results": {
      "4": [
        {
          "service": 4,
          "serviceTime": "2018-02-01 10:00:00",
          "usrname": "chris job",
          "eqname": "mill saw",
          "quantity": "3.00",
          "rate": "20.00",
          "total": "60.00",
          "note": ""
        },
        {
          "service": 4,
          "serviceTime": "2018-02-04 10:00:00",
          "usrname": "chris job",
          "eqname": "mill saw",
          "quantity": "3.00",
          "rate": "20.00",
          "total": "0.00",
          "note": null
        }
      ],
      "34": [
        {
          "service": 34,
          "serviceTime": "2018-02-06 12:30:00",
          "usrname": "chris job",
          "eqname": "jack hammer",
          "quantity": "0.00",
          "rate": "20.00",
          "total": "0.00",
          "note": "Training"
        }
      ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <div v-for="invoice in results">
    <div v-for="items in invoice">
        <div style="display:inline">{{ items.eqname }} |</div>
        <services :value="items"></services>
    </div>
  </div>
</div>

Example here 有一张桌子

【讨论】：