I'm coding for the function to see the Faculty's details and it shows number of majors of that faculty. I don't know how to count array majors with v-if and v-for. Please help me fix that. Many thanks.
Template tag
<tr>
<td>Sumary:
<strong v-for="major in majors">
<strong v-if="form.faculty_code==majors.major_faculty">
{{ major }}
</strong>
</strong>
</td>
</tr>
Script tag
data() {
return {
faculties:[],
majors:[],
form: new Form({
faculty_id:'',
faculty_code:'',
faculty_name:'',
faculty_status: '',
}),
};
},
mounted() {
this.fetchMajors();
this.fetchFaculties();
},
methods: {
fetchFaculties(page_url) {
let vm = this;
page_url = '../../api/admin/edu-faculty/faculty/'+this.currentEntries+'?page='+this.pagination.current_page;
fetch(page_url)
.then(res => res.json())
.then(res => {
this.faculties = res.data;
this.pagination = res.meta;
})
.catch(err => console.log(err));
},
fetchMajors(page_url) {
let vm = this;
page_url = '../../api/admin/edu-major/chuyen-nganh/major';
fetch(page_url)
.then(res => res.json())
.then(res => {
this.majors = res.data;
})
.catch(err => console.log(err));
},
}
To only get the amount of majors with the given faculty code you can use in your mounted() function
this.total.majors = 0;
this.majors.forEach((element) => {
element.major_faculty == this.faculty_code ? this.total_majors += 1 : ""
});
Thanks for watching and help me. I've found the solution for this.
Template tag
<tr>
<td>Sumary:
<strong>
{{ countA.length }}
</strong>
</td>
Script tag
computed: {
countA() {
return this.majors.filter(major => major.major_faculty==this.form.faculty_code);
}
},