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));
    },
}

CodePudding user response：

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  : ""
});

CodePudding user response：

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);
        }
    },