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

Posted 2023-02-22

【中文标题】如何在 vuejs 中打破 v-for 循环

【英文标题】：How to break a v-for loop in vuejs

【发布时间】：2018-06-14 13:41:40

【问题描述】：

我有一个我在下面提到的代码段。我已经将 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"> 循环。 在这里，我想从第一个到最后一个搜索内部循环。如果数据根据给定的条件匹配，我想打破循环。然后我想一次又一次地这样做。 我怎样才能做到这一点？任何帮助，将不胜感激。 提前致谢。

【问题讨论】：

How to break v-for loop in vue.js?的可能重复

【参考方案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">

【讨论】：

感谢您的回复@bsalex。如果可能的话，你能举个例子吗？

@Sakil 你自己试试怎么样？

已经尝试过兄弟，但仍在尝试，但你知道没有运气 :( :( @George

@Sakil 在 *** 上提问的一部分是向我们展示您的尝试。这样，我们就不会浪费时间尝试您所做的相同事情。或者我们可以指出你做错的事情