I have the function of display data from major table on MySQL. I want to display the type of that major by comparing with the id of the faculty table like below. I have it displayed on console.log, how do I display it on the template?
Template tag
<td>
{{ filterFaculty }}
</td>
Script tag
data() {
return {
majors:[],
faculties:[],
form: new Form({
major_id:'',
major_code:'',
major_name:'',
major_faculty:'',
major_status: '',
}),
};
},
computed: {
filterFaculty() {
for(let i in this.majors) {
this.faculties.forEach((element) => {
if(element.faculty_code==this.majors[i].major_faculty) {
console.log(element.faculty_name);
}else {
return '-';
}
});
}
}
},
mounted() {
this.fetchFaculties();
this.fetchMajors();
},
methods: {
fetchFaculties(page_url) {
let vm = this;
page_url = '../../api/admin/edu-faculty/faculty/faculty';
fetch(page_url)
.then(res => res.json())
.then(res => {
this.faculties = res.data;
})
.catch(err => console.log(err));
},
fetchMajors(page_url) {
let vm = this;
page_url = '../../api/admin/edu-major/major/'+this.currentEntries+'?page='+this.pagination.current_page;
fetch(page_url)
.then(res => res.json())
.then(res => {
this.majors = res.data;
this.pagination = res.meta;
})
.catch(err => console.log(err));
},
}
There are different ways to achieve that, I think the easiest is to do following:
Define something in your data - like inputText and than set your element.faculty_name to this - like following:
data() {
return {
inputText: "",
}
}
computed: {
filterFaculty() {
for(let i in this.majors) {
this.faculties.forEach((element) => {
if(element.faculty_code==this.majors[i].major_faculty) {
this.inputText = element.faculty_name; //Changed here
}else {
return '-';
}
});
}
}
},
and than reference it in your template like this:
<td>
{{ inputText }}
</td>
This should solve your problem!