Question

我有一个代码段，我在下面提到过。我在vuetifyjs上使用了vuejs。

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

当内部<template v-for="(mark,index) in resultsList">条件为真时，我想要中断v-if循环。在这里，我想从头到尾搜索内部循环。如果数据根据给定的条件匹配，我想打破循环。然后我想一次又一次地做。我怎样才能做到这一点？任何帮助，将不胜感激。提前谢谢。

Answer 1

无法打破v-for。最好在组件中创建一个计算属性，然后在那里过滤数据，只将所需数据传递给v-for。

例如：

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

然后在你的模板中：

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

如何打破vuejs中的v-for循环

1 个答案: