vue js将嵌套数组加载到表

vue js如何将嵌套数组加载到html表中。当我在内部v中使用v-因为它会导致错误属性或方法“key”没有在实例上定义，而是在渲染过程中被引用。确保在数据选项中声明反应数据属性。vue js将嵌套数组加载到表

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

这种结果IM期待 enter image description here

来源

2017-07-25 Kushan Shanuka

哪里是JSON放置到处理列表的渲染？共享Vue应用程序实例代码 –

你必须在vue实例'data'中定义JSON对象 –

它是从ajax加载并分配给数据属性以及 –

可以嵌套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>

在外面v-for“项目”是你的阵列一个项目。内部的v-for从第一个循环的item.jobs循环。

我不知道你正在试图获得与布局，但你也可以尝试把内v-for上<td>甚则<tr>元素，如：

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

来源

2017-07-25 07:58:29

我试过这个Mark_M。但它会给出一个错误属性或方法“item”没有在实例上定义，但在渲染过程中被引用。确保在数据选项中声明反应数据属性。 –

这里运行时没有错误@KushanShanuka。你说你从ajax获取数据？也许你需要使用'v-if'来防止表在ajax到达之前尝试渲染。 –

我会尝试@Mark_M ..实际上我正在寻找这种结果https://i.stack.imgur.com/hNlry.png。 –

Key is not defined意味着您在使用key in v-for它不存在于您的JSON数据中。你需要以不同的方式

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

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

来源

2017-07-25 08:04:23

尝试是这样的

<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型的V型的内结合key，你必须使用迭代的结果。

来源

2017-07-25 08:07:11

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

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

你可以阅读更多关于Vue公司的有效的方法使用该密钥属性here

来源

2017-07-25 08:28:58

vue js将嵌套数组加载到表

回答

相关问题