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

Question

我有一个我在下面提到的代码段。我已经将 vuejs 与 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>

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

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