javascript - vue js嵌套数组加载到表

Question

在vue js中如何将嵌套数组加载到html表中。当我在 v-for 内部使用 v-for 时，会出现错误属性或方法“key”未在实例上定义，但在渲染期间引用。确保在数据选项中声明响应式(Reactive)数据属性。

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

我期待这样的结果 enter image description here

Answer 1

Key is not Defined 表示您在 v-for 中使用 key，但 JSON 数据中不存在该 key 。您需要以不同的方式绑定(bind)key

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

了解更多Vue.js key和 v-for index