javascript - How to break a v-for loop in vuejs

Question

I have a code segment that i have mentioned below. I have used vuejs with vuetifyjs.

 <v-data-table v-bind:headers="headers" v-bind:items="uniqueSubjects">
                            <template slot="items" slot-scope="props">
                                <td class="text-xs-center">{{ props.index+1 }}</td>
                                <td class="text-xs-center">{{ month[new Date(props.item.daily_date).getMonth()] }},{{ props.item.student_id }}</td>
                                <td class="text-xs-center">{{ props.item.subjects.subject_name }}{{ props.item.subjects.id }}</td>
                                <template v-for="n in 31">  
                                    <template v-for="(mark,index) in resultsList">
                                        <template v-if="new Date(mark.daily_date).getDate() == n && mark.subject_id == props.item.subject_id && mark.student_id == props.item.student_id">
                                            <td class="text-xs-center">
                                                {{ mark.daily_marks }}
                                            </td>
                                        </template>
                                        <template v-else-if="index>=resultsList.length-1">
                                            <td class="text-xs-center">-</td>
                                        </template>
                                    </template>
                                </template>
                            </template>
                            <template slot="pageText" slot-scope="{ pageStart, pageStop }">
                                From {{ pageStart }} to {{ pageStop }}
                            </template>
                        </v-data-table>

I want to break my <template v-for="(mark,index) in resultsList"> loop when the internal v-if condition is true. Here i want to search the inner loop from first to last.I want to break the loop if the data is matched depending on the given condition.and then i want to do it again and again. How can I do that? Any help would be appreciated. Thanks in advance.

Answer 1

There is no way to break v-for. It is better to create a computed property in your component and filter your data there to pass only needed data to v-for.

For example:

// ... your component code
computed: {
   validResultsList() {
     return this.resultsList/* ... your filtering logic ... */;
   }
}
// ... your component code 

And then in your template:

<template v-for="(mark,index) in validResultsList">