Vuejs2 使用VUEJS在嵌套数组中循环

Vuejs2 使用VUEJS在嵌套数组中循环,vuejs2,Vuejs2,/我有以下JSON数据。我需要列出做某一特定科目的学生。如何在VUEJS中使用v-for实现这一点/ //我的html代码结构如下所示 <div id="app"> <ul> <li v-for="item in students"> <div class="row " style="background-color: #f4fbee;"> <

/我有以下JSON数据。我需要列出做某一特定科目的学生。如何在VUEJS中使用v-for实现这一点/

//我的html代码结构如下所示

<div id="app">
        <ul>
           <li v-for="item in students">
              <div class="row " style="background-color: #f4fbee;">
                  <div class="col-md-2">{{item.reg_no}}</div>
             </div>
                 <div class="row" v-for="subjects in item.subjects">{{subjects.subject_name}}
             </div>
        </li>
           </ul>  

<pre>{{students}}</pre>
<p>{{getStudentsBySubjectId}}</p>

</div>
var appVM=new Vue({
    el:"#app",
    data:function(){    
        return {
            student_id: '',
            reg_no:'',
            student_name:'',
            students:Array(),
            subjects:{},

        }

    },
    created:function (){
        this.getAllStudents();
    },
    methods:{
        getAllStudents:function(){
            var self=this;
              axios.get("/Students/list").then(function (response) {
                    this.students = response.data;

              }.bind(this)).catch(function (error) {
                console.log('Error while fetching student data: ' + error)
              })
        },
        getStudentsBySubjectId:function (students, subjectId) {
            return students.filter(function(student) {
                return student.subjects.some(function(subject) {
                    return subject.subject_id === subjectId;
                })
            })
        }

    },

})

</script>
//我们如何显示过滤后的学生。
//上面的代码显示了在视图上调用数组时返回的数据,假设您使用的是ES6。 以下是您如何找到所有学习某一特定学科的学生:

function getStudentsBySubjectId(students, subjectId) {
    return students.filter(function(student) {
        return student.subjects.some(function(subject) {
            return subject.subject_id === subjectId;
        })
    })
}
对于ES5,使用普通函数而不是箭头函数:


您只需对上述函数返回的数组进行v-for即可。

非常感谢。但是我使用的是ES5。因此,我得到一个未定义的错误过滤器。我们如何在ES5中做到这一点?RegardsES5支持过滤器,只是不支持箭头功能。我已经更新了ES5的答案,谢谢。我已经在上面给出了更多的细节。谢谢你抽出时间回复@古玛
function getStudentsBySubjectId(students, subjectId) {
    return students.filter(student => student.subjects.some(subject => subject.subject_id === subjectId))
}
function getStudentsBySubjectId(students, subjectId) {
    return students.filter(function(student) {
        return student.subjects.some(function(subject) {
            return subject.subject_id === subjectId;
        })
    })
}