时间戳

首页 > 解决方案 > vue v-for循环内如何显示两个描述值的数组数据？

javascript - vue v-for循环内如何显示两个描述值的数组数据？

问题描述

    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",…} create_datetime: "2020-09-03 17:15:13" id: "4" public_number: "4" reference_num: "4" total: "100" type: "invoice"

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

标签： javascriptvue.jsvuejs2

解决方案

我希望我明白你在说什么，因为你的问题需要更多澄清你需要将支付数据与 ledgerDetails 的对象连接起来，所以考虑你必须为支付对象添加唯一键，比如添加 paymentID 和你的 ledgerDetails将有一个额外的属性引用 paymentId 的 id。

分类帐详细信息 obj

{
  paymentId:500,
  otherAttribute...
}

在付款时，每个对象都有唯一的 ID

支付对象

{
paymentId:500
}

另一方面，您需要一种方法来获取对象数据的付款或通过 id 从商店获取付款

findPaymentById

findPaymentById(paymentId) {
 return paymentList.find(i => i === paymentId)
}

现在您已准备好通过从对象中获取 paymentId 并通过该方法搜索它并与另一个打印详细信息来获取 ledgerDetails 的付款。

顺便说一句，在 v-for 上，您可以忽略索引，因为它将返回列表的完整对象，因此您可以在没有索引的情况下直接访问它

<div v-for="ledgerItem from ledgerDetails">
payment details :
{{ findPaymentById(ledgerItem[0].paymentId) }}
</div>

在这里我只使用了零索引 ledgerItem[0] 因为来自 ledgerDetails 的 ledgerItem 它是一个对象数组。

如果我不太了解，请回复，如果我能帮助你，我会尝试

推荐阅读