vue-components中的嵌套v-for循环

Question

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

输出表

Equp Name |服务时间
磨锯| 2018-02-01 10:00:00
磨锯| 2018-02-04 10:00:00

Equp Name |服务时间
杰克汉默| 2018-02-06 12:30:00

VUE COMPONENT

    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>

建议？

Answer 1

是的，您可以嵌套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

Answer 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>

Answer 3

你可以做到

  <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

查看我的演示