CODEWITHSUNDEEP
javascriptjsonvue.js
Kushan Shanuka
Kushan Shanuka

Reputation: 13

vue js nested array load to table

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

Upvotes: 0

Views: 1911

Answers (4)

Avi Waserman
Avi Waserman

Reputation: 96

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

Upvotes: 0

Muthu Kumaran
Muthu Kumaran

Reputation: 17900

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

Upvotes: 1

lucas
lucas

Reputation: 1145

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.

Upvotes: 0

Mark
Mark

Reputation: 92440

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>

Upvotes: 0

Related Questions