【问题标题】:Loop through multi dimensional array of api response in vuejs循环遍历vuejs中api响应的多维数组
【发布时间】:2018-12-30 20:47:15
【问题描述】:

我有一个 api 响应数组。我正在尝试使用 v-for 循环遍历数组。我可以遍历第一次迭代,但对于第二次循环我不能进行迭代。锄头我可以在这里循环通过收据对象吗? 我有一个多维数组

//this is my api response
    0:      name : "name",
        address : "address"

        0:
            reciepts : 
                ballance : 10,
                bill : 101, 
        1:  
            reciepts : 
                ballance : 12,
                bill : 101, 

    1:  name : "name",
        address : "address"

        0:
            reciepts : 
                ballance : 13,
                bill : 101, 
        1:
            reciepts : 
                ballance : 14,
                bill : 101, 
    2:  name : "name",
        address : "address"

        0:
            reciepts : 
                ballance : 15,
                bill : 101, 
        1:
            reciepts : 
                ballance : 16,
                bill : 101, 

我试图遍历这些项目,但我不知道如何获取子数组对象(在我的情况下是收据)。我该怎么做>谁能帮帮我?

 <ul>
    <li v-for="report in reportResults"> //this is working
       <div class="row " style="background-color: #f4fbee;">
          <div class="col-md-2">{{report.bill_no}}</div>
        </div>
        <div class="row"  v-for="reciepts in reportResults" style="    
             background-color: #fff2f2;"> //this is not working
         <div class="col-md-2" ></div>
         <div class="col-md-2" v-show="reciepts.bill_no==report.bill_no">{{ 
                  reciepts.doc_no}}</div>

<li>
 </ul>   

【问题讨论】:

    标签: javascript arrays vue.js


    【解决方案1】:

    尝试循环遍历子数组而不是全局数组

    <div class="row"  v-for="reciepts in report">
    </div>
    

    【讨论】:

    • reciepts.doc_no
      //它什么都不打印
    • @2lionel 但如果我这样做 &lt;div class="row" v-for="reciepts in report"&gt; reciepts&lt;/div&gt; 它会打印所有内容.... { "reciepts": { "bill_no": "123", "doc_no": "nmkdzl", "paid": 100}
    • 只显示你想要的:{{receipts.bill_no}}
    • 它没有显示任何内容
    • 它的 bcoz 位于另一个名为“reciepts”的数组中。我如何访问收据
    猜你喜欢
    • 2013-04-01
    • 2012-04-21
    • 2011-01-02
    • 2014-05-01
    相关资源
    最近更新 更多