CODEWITHSUNDEEP
vue.jsvue-component
ChrisJ
ChrisJ

Reputation: 477

Nested v-for loops in a vue-components

I'm trying to use a vue.js component to display the following data (in a vue instance) as a table.
But I not sure how to access the data. I tried nested v-for loops.

OUTPUT TABLE

Equp Name | Service Time
Mill Saw | 2018-02-01 10:00:00
Mill Saw | 2018-02-04 10:00:00

Equp Name | Service Time
Jack Hammer | 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>

Suggestions?

Upvotes: 1

Views: 8877

Answers (3)

Sovalina
Sovalina

Reputation: 5609

Yes you can nest v-for loops but you have to put them inside different elements (as div for example)

Btw, you don't need 3 v-for loops to display you data the way you want :

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 with a table

Upvotes: 1

ittus
ittus

Reputation: 22393

You can do

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

You can check my demo at https://codepen.io/ittus/pen/erMRNL

Upvotes: 2

Nafiul Islam
Nafiul Islam

Reputation: 1220

You should do it in this fashion

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

Upvotes: 1

Related Questions