如何在vue v-for循环中显示两个描述值的数组数据?

时间:2020-12-26 11:34:57

标签: javascript vue.js vuejs2

    I have an array of 32 datas named ledgerDetails. I display the details of the data in vue v-for loop. But, within the loop I want to display the details of invoiceDescriptions consists of 23 datas and paymentDescriptions consists of 12 datas with some conditions. So, how to display it.
    
    My Code :
    
    <tr v-for="(ledger, index) in ledgerDetails" :key="index">
                  <td>
                    {{ formatDate(ledgerDetails[index][0]["create_datetime"]) }}
                  </td>
                  <td>
                    <span
                      v-if="
                        isNaN(
                          ledgerDetails[index][0]['public_number'] &&
                            userDetails['User']['account_id'] ==
                              ledgerDetails[index][0]['public_number']
                        )
                      "
                    >
                      {{ paymentDescriptions[index] }}
                    </span>
                    <span
                      v-if="(
                        ledgerDetails[index][0]['public_number'] == 0 &&
                        ledgerDetails[index][0]['type'] == 'creditNote')
                      "
                    >
                      Refund
                    </span>
                    <span v-else>
                      <span v-if="invoiceDescriptions !== 'undefined'">
                        {{ getInvoiceDesc() }}
                      </span>
                      <span v-else> </span>
                    </span>
                  </td>
                  <td>
                    <span
                      v-if="
                        isNaN(
                          ledgerDetails[index][0]['public_number'] &&
                            userDetails['User']['account_id'] ==
                              ledgerDetails[index][0]['public_number']
                        )
                      "
                    >
                      Payment
                    </span>
                    <span
                      v-if="
                        ledgerDetails[index][0]['public_number'] == 0 &&
                        ledgerDetails[index][0]['type'] == 'creditNote'
                      "
                    >
                      Credit Note
                    </span>
                    <span v-else> Invoice </span>
                  </td>
                  <td></td>
                  <td>
                    <span
                      v-if="
                        isNaN(
                          ledgerDetails[index][0]['public_number'] &&
                            userDetails['User']['account_id'] ==
                              ledgerDetails[index][0]['public_number']
                        )
                      "
                    >
                      <span v-if="!ledgerDetails[index][0]['reference_num1']">
                        {{ ledgerDetails[index][0]["reference_num1"] }}
                      </span>
                      <span v-else>
                        {{ ledgerDetails[index][0]["reference_num"] }}
                      </span>
                    </span>
                    <span
                      v-if="
                        ledgerDetails[index][0]['public_number'] == 0 &&
                        ledgerDetails[index][0]['type'] == 'creditNote'
                      "
                    >
                      {{ ledgerDetails[index][0]["reference_num1"] }}
                    </span>
                    <span v-else>
                      {{ ledgerDetails[index][0]["reference_num1"] }}
                    </span>
                  </td>
                  <td>
                    <span
                      v-if="
                        isNaN(
                          ledgerDetails[index][0]['public_number'] &&
                            userDetails['User']['account_id'] ==
                              ledgerDetails[index][0]['public_number']
                        )
                      "
                    >
                    </span>
                    <span
                      v-if="
                        ledgerDetails[index][0]['public_number'] == 0 &&
                        ledgerDetails[index][0]['type'] == 'creditNote'
                      "
                    >
                    </span>
                    <span v-else>
                      <!-- {{ floatConversion(ledger.total) }} -->
                    </span>
                  </td>
                  <td>
                    <span
                      v-if="
                        isNaN(
                          ledgerDetails[index][0]['public_number'] &&
                            userDetails['User']['account_id'] ==
                              ledgerDetails[index][0]['public_number']
                        )
                      "
                    >
                      <!-- {{ floatConversion(ledger.total) }} -->
                    </span>
                    <span
                      v-if="
                        ledgerDetails[index][0]['public_number'] == 0 &&
                        ledgerDetails[index][0]['type'] == 'creditNote'
                      "
                    >
                      <!-- {{ floatConversion(ledger.total) }} -->
                    </span>
                    <span v-else> </span>
                  </td>
                  <td></td>
                </tr>`<tr v-for="(ledger, index) in ledgerDetails" :key="index">
                  <td>
                    {{ formatDate(ledgerDetails[index][0]["create_datetime"]) }}
                  </td>
                  <td>
                    <span
                      v-if="
                        isNaN(
                          ledgerDetails[index][0]['public_number'] &&
                            userDetails['User']['account_id'] ==
                              ledgerDetails[index][0]['public_number']
                        )
                      "
                    >
                      {{ paymentDescriptions[index] }}
                    </span>
                    <span
                      v-if="(
                        ledgerDetails[index][0]['public_number'] == 0 &&
                        ledgerDetails[index][0]['type'] == 'creditNote')
                      "
                    >
                      Refund
                    </span>
                    <span v-else>
                      <span v-if="invoiceDescriptions !== 'undefined'">
                        {{ getInvoiceDesc() }}
                      </span>
                      <span v-else> </span>
                    </span>
                  </td>                     
                </tr>


Here, how to display the data of invoiceDescrptions and paymentDescriptions details within the ledgerDetails for loop.

Data : 

paymentDescriptions: [{PaymentInfoCheque: {description: "Cash"}}, {PaymentInfoCheque: {description: "Cash"}},…]
0: {PaymentInfoCheque: {description: "Cash"}}
PaymentInfoCheque: {description: "Cash"}
description: "Cash"
1: {PaymentInfoCheque: {description: "Cash"}}
2: {PaymentInfoCheque: {description: "Cash"}}
3: {PaymentInfoCheque: {description: "Cash"}}
4: {PaymentInfoCheque: {description: "Cash"}}
5: {PaymentInfoCheque: {description: "Cash"}}
6: {PaymentInfoCheque: {description: "Cash"}}
7: {PaymentInfoCheque: {description: "Cash"}}
8: {PaymentInfoCheque: {description: "Cash"}}
9: {PaymentInfoCheque: {description: "Cash"}}
10: {PaymentInfoCheque: {description: "Cash"}}
11: {PaymentInfoCheque: {description: "Cash"}}

ledgerDetails: [[,…], [,…], [{type: "invoice", create_datetime: "2020-10-14 14:46:28", total: "100.82417582418",…}],… ] 0: [,…] 0: {type: "invoice", create_datetime: "2020-09-03 17:15:13", total: "100", public_number: "4", id: "4",...} 创建日期时间:“2020-09-03 17:15:13” 编号:“4” 公众号:“4” 参考编号:“4” 总计:“100” 类型:“发票”

invoiceDescriptions: [[{description: "test"}], [{description: "test Period from 25 Sep 2020 to 29 Sep 2020,test"}],...] 0:[{描述:“测试”}] 0:{描述:“测试”} 描述:“测试”

0 个答案:

没有答案