Vuejs2 使用VUEJS在嵌套数组中循环
/我有以下JSON数据。我需要列出做某一特定科目的学生。如何在VUEJS中使用v-for实现这一点/ //我的html代码结构如下所示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;"> <
<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;
})
})
}