Question

在vue js中如何将嵌套数组加载到html表中。当我在v-for内部使用v-for时，它会输入错误属性或方法＆＃34; key＆＃34;未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。

＆＃13;

[
   {
      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"
         }
      ]
   }
]

＆＃13;

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

＆＃13;

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

Answer 1

Key is not defined表示您在key中使用{J}数据中不存在的v-for。你需要以不同的方式绑定key

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

了解有关Vue.js key和v-for index

的更多信息

Answer 2

您可以毫无困难地嵌套change(event:any) { console.log(event.target.files); }。你只是混淆了一些东西。这适用于我的数据：

v-for

在外部<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>＆＃39;项目＆＃39;是你的数组中的一个项目。内部v-for在第一个循环的v-for上循环。

我不确定您要尝试使用布局，但您也可以尝试将内部item.jobs放在v-for而不是<td>元素上：

<tr>

Answer 3

尝试这样的事情

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

要在v-for中使用v-for，你必须使用迭代的结果。

Answer 4

似乎你有语法问题（缺少括号）。试试这个：

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

您可以使用关键属性here了解有关Vue处理列表呈现的有效方法的更多信息

vue js嵌套数组加载到表

4 个答案: