vue js nested array load to table

Question

in vue js how to load nested array to a html table. when I use v-for inside v-for it qives an error Property or method "key" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

[
   {
      jobtype_id:"1",
      jobtype_code:"L001",
      jobtype_name:"Labour",
      jobtype_order:"1",
      jobtype_comment:"1",
      jobs:[
         {
            jobinvoicedtlid:"1",
            JobInvNo:"JBIN0016",
            JobCardNo:"",
            JobType:"1",
            JobCode:null,
            JobDescription:"Wheel alignment",
            JobQty:"2",
            JobPrice:"800.00",
            JobTotalAmount:"1600.00",
            JobDiscount:"0.00",
            JobNetAmount:"1600.00",
            JobDiscountType:"1",
            JobinvoiceTimestamp:"2147483647",
            Description:"Labour"
         },
         {
            jobinvoicedtlid:"2",
            JobInvNo:"JBIN0016",
            JobCardNo:"",
            JobType:"1",
            JobCode:null,
            JobDescription:"Full Service",
            JobQty:"4",
            JobPrice:"250.00",
            JobTotalAmount:"1000.00",
            JobDiscount:"0.00",
            JobNetAmount:"1000.00",
            JobDiscountType:"1",
            JobinvoiceTimestamp:"2147483647",
            Description:"Labour"
         }
      ]
   },
   {
      jobtype_id:"2",
      jobtype_code:"S002",
      jobtype_name:"Parts Outside",
      jobtype_order:"3",
      jobtype_comment:null,
      jobs:[
         {
            jobinvoicedtlid:"3",
            JobInvNo:"JBIN0016",
            JobCardNo:"",
            JobType:"2",
            JobCode:null,
            JobDescription:"Oil Change",
            JobQty:"5",
            JobPrice:"500.00",
            JobTotalAmount:"2500.00",
            JobDiscount:"0.00",
            JobNetAmount:"2500.00",
            JobDiscountType:"1",
            JobinvoiceTimestamp:"2147483647",
            Description:"Parts Outside"
         }
      ]
   }
]

<tbody>
    <tr v-for="item,key in printdata">
        <td colspan='6'> <b>{{item.jobtype_name}}</b></td>
             <table border="1">
                 <tr v-for="itm in printdata.jobs">
                     <td>itm.JobDescription</td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                  </tr>
            </table>
        </tr>     
  </tbody>

this kind of result im expecting enter image description here

where is the JSON placed? share Vue app instance code

Muthu Kumaran
– Muthu Kumaran

2017-07-25 07:52:08 +00:00
Commented Jul 25, 2017 at 7:52 — Muthu Kumaran
– Muthu Kumaran, Commented Jul 25, 2017 at 7:52
you have to defined the JSON object in vue instance 'data'

V. Sambor
– V. Sambor

2017-07-25 07:56:22 +00:00
Commented Jul 25, 2017 at 7:56 — V. Sambor
– V. Sambor, Commented Jul 25, 2017 at 7:56
it is load from ajax and assign to data property as well

Kushan Shanuka
– Kushan Shanuka

2017-07-25 07:58:15 +00:00
Commented Jul 25, 2017 at 7:58 — Kushan Shanuka
– Kushan Shanuka, Commented Jul 25, 2017 at 7:58

tony19 · Accepted Answer · 2022-07-16 01:05:49Z

1

Key is not defined means you are using key in v-for which is not exist in your JSON data. you need to bind key in a different way

    <tr v-for="(item, index) in printdata" v-bind:key="index">

To know more about Vue.js key and v-for index

edited Jul 16, 2022 at 1:05

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 25, 2017 at 8:04

Muthu Kumaran

18k5 gold badges50 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark · Accepted Answer · 2017-07-25 07:58:29Z

0

You can nest v-for without trouble. You just have a few things mixed up. This works for me with your data:

<template>
  <div class="hello">
  <tbody>
    <tr v-for="item in printdata">
        <td colspan='6'> <b>{{item.jobtype_name}}</b></td>
            <table border="1">
                <tr v-for="job in item.jobs">
                    <td>{{job}}</td>
                  </tr>
            </table>
        </tr>     
  </tbody>

  </div>
</template>

In the outside v-for 'item' is one item from your array. The inside v-for loops over the item.jobs from the first loop.

I'm not sure what you are trying to get with the layout, but you might also try putting the inner v-for on the <td> rather then the <tr> element like:

<tr>
    <td v-for="job in item.jobs">{{job.Description}}</td>
</tr>

answered Jul 25, 2017 at 7:58

Mark

92.6k8 gold badges116 silver badges156 bronze badges

4 Comments

Kushan Shanuka Over a year ago

I have tried this Mark_M. but it will gives an error Property or method "item" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Mark Over a year ago

It's running with no errors here @KushanShanuka. You said you are getting the data from ajax? Maybe you need to use a v-if to prevent the table from trying to render before the ajax arrives.

Kushan Shanuka Over a year ago

I'll try @Mark_M.. acctually im looking for this kind of result i.sstatic.net/hNlry.png.

Kushan Shanuka Over a year ago

can you here the code example please.. thank you @Mark_M

lucas · Accepted Answer · 2017-07-25 08:07:11Z

0

Try something like this

<table>
  <tr>
    <td v-for='item in items'>
      // Use 'item' from now now
      <table>
        <tr v-for='depth in item'>
          <td>{{ depth.description }}</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

To use a v-for inside a v-for, you got to use the result of the iteration.

answered Jul 25, 2017 at 8:07

lucas

1,1458 silver badges14 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 05:40:28Z

0

It seems you have syntax issue (missing parenthesis) . Try this:

<tbody>
    <tr v-for="(item,key) in printdata">
        <td colspan='6'> <b>{{item.jobtype_name}}</b></td>
             <table border="1">
                 <tr v-for="itm in printdata.jobs">
                     <td>itm.JobDescription</td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                  </tr>
            </table>
        </tr>     
  </tbody>

You can read more about the efficient approach of Vue to handle list rendering using the key attribute here

edited Jul 16, 2022 at 5:40

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 25, 2017 at 8:28

Avi Waserman

966 bronze badges

Collectives™ on Stack Overflow

vue js nested array load to table

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related