使用while in v-for vue js或在v-if之后停止v-for为真

Question

我有一个这样的数组:

{
"id": 19,
"title": "jsj",
"orderName": "rendan",
"seller_id": null,
"totalPrice": "24000000",
"pricePaid": "4000000,20000000",
"paid": "1,0",
"dateNumber": [
"12",
"فروردین",
"1400"
],
"arrayCategories": [
"2",
"3"
],
"paidDetails": [
{
"pricePaid": "4000000",
"dateOfPayment": "1401/02/05",
"paid": "1",
"daysLeft": 3
},
{
"pricePaid": "20000000",
"dateOfPayment": "1401/02/20",
"paid": "0",
"daysLeft": 18
},
{
"pricePaid": "20000000",
"dateOfPayment": "1401/02/20",
"paid": "0",
"daysLeft": 25
}
],
"priceLeft": 20000000

}

如你所见，有一个'paidDetails'，它本身包含三个其他对象，

，我在我的HTML元素中使用了v-for，像这样:

<tr v-else v-for="(project,index) in resultQuery" :key="'doctor'+index">
<th scope="row">@{{project.caseNumber}}</th>
<th scope="row">@{{project['seller']}}</th>
<td>@{{project['title']}}</td>
<td>@{{project['orderName']}}</td>
<th>@{{project.dateEnd+'-'+project.dateStart}}</th>
<td>کل:
@{{Number(project.totalPrice).toLocaleString()+' تومان '}}
<br>
باقی مانده:
@{{Number(project.priceLeft) ? 
Number(project.priceLeft).toLocaleString()+' تومان ':project.priceLeft}}
</td>
<td>
<p v-if="payment.paid==0" v-for="(payment,index) in  
project.paidDetails" :key="'daysLeft'+index" >
@{{ payment.daysLeft+' روز' }}
</p>
</td>
</tr>

所以我的问题是如何在最后一个td元素中停止v-for(它本身是父v-for中的另一个v-for);当付款。支付是0和支付。daysLeft小于paidDetails中的其他对象。

<td>
<p v-if="payment.paid==0" v-for="(payment,index) in  
project.paidDetails" :key="'daysLeft'+index" >
@{{ payment.daysLeft+' روز' }}
</p>
</td>

我认为我需要的是一个while循环，但我不知道如何做到这一点，任何帮助都会很感激

Answer 1

你的模板是用来呈现数据的。不要尝试在模板中操作数据。这是一个反模式

按照你想要的方式格式化你的数据，然后在模板中呈现格式化后的数据。

正如Lissy 93提到的，在这种情况下，最好的办法可能是创建一个computed属性，然后在模板中遍历它。

在这里阅读计算属性:

https://vuejs.org/guide/essentials/computed.html