using while in v-for vue js or stop v-for after v-if is true

Question

hey i have an array like this:

{
"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

}

as u can see there is a 'paidDetails' Which itself includes three other objects,

and i've used v-for in my html elements like this:

 <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>

so my question is how can i stop v-for in the last td element (which itself is a another v-for inside the parent v-for); when payment.paid is 0 and payment.daysLeft is less than the others objects inside the paidDetails.

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

i think what i need is a while loop but i dont know how to do it, any help would be appreciated

Answer 1

Your template is for rendering data. Do not try and manipulate your data in the template. This is an anti pattern.

Format your data in the way you want it presented and then render the formatted data in the template.

Your best bet in this instance - as Lissy 93 mentioned - is probably to create a computed property and iterate over that in your template.

Read up on computed properties here:

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