在v-for vue js中使用或在v-f-if为true之后停止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

}，

因为您可以看到有一个“付费尾巴”本身包括其他三个对象，

而且我在我的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>

所以我的问题是我如何停止v v v - 在最后一个TD元素中（本身是父v-for内部的另一个v-for）；当付款。付费为0且付款。Daysleft少于付费尾尾中的其他对象。

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

我认为我需要的是一个循环，但我不知道该怎么做， 任何帮助将不胜感激

Answer 1

您的模板用于渲染数据。不要尝试在模板中操纵您的数据。这是一种反模式。

以您希望显示的方式格式化数据，然后在模板中渲染格式化的数据。

如Lissy 93所述，在这种情况下最好的选择可能是在模板中创建一个计算的属性并迭代该属性。

在此处阅读在计算属性上阅读：

https://vuejs.s.s.org/guide/guide/sentials/essentials/compented.html