Nested v-for loops in a vue-components - vue.js

Question

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?

Answer 1

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

Answer 2

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>

Answer 3

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