I am facing a challenge in populating a Bootstrap-Vue form select with objects obtained via JSON. The JSON data comprises teacher information from various fields:
[
{
"id": 1,
"name": "John",
"surname": "Doe",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e44414640004a414b6e49434f4742004d4143">[email protected]</a>"
}
]
My goal is to display the full name (concatenating name and surname) of each teacher in the select list.
Previously, I successfully achieved this by using a computed property to process the list and display the names. However, now I want to filter the list of courses based on the selected teacher.
To accomplish this, I require access to the teacher's email address which I have currently omitted while processing the teacher names for display.
As a result, I am unable to update the course list dynamically according to the selected teacher.
Below is the template code snippet:
<b-form-group
id="input-group-3"
label="Docente:"
label-for="input-3"
>
<b-form-select
v-model="teacher"
:options="teachers"
value-field="item"
text-field="fullName"
required
@change="filterCourse"
></b-form-select>
<div class="mt-3">
Selected: <strong>{{ teacher }}</strong>
</div>
</b-form-group>
This is the script code snippet:
import { mapGetters, mapActions } from "vuex";
export default {
data() {
return {
teacher: "",
course: "",
};
},
created: function() {
this.GetActiveTeachers();
this.GetActiveCourses();
},
computed: {
...mapGetters({
ActiveTeacherList: "StateActiveTeachers",
ActiveCourseList: "StateActiveCourses",
FilteredTeacherList: "StateTeacherByCourse",
FilteredCourseList: "StateCourseByTeacher",
}),
teachers: function() {
let list = [];
this.ActiveTeacherList.forEach((element) => {
let teacher = element.name + " " + element.surname;
list.push(teacher);
});
return list;
},
},
methods: {
...mapActions([
"GetActiveTeachers",
"GetActiveCourses",
"GetCourseByTeacher",
"GetTeacherByCourse",
"AssignTeaching",
]),
async filterCourse() {
const Teacher = {
teacherEmail: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="076d686f692963686247606a666e6b2964686a">[email protected]</a>", // For testing purpose
};
try {
await this.GetCourseByTeacher(Teacher);
} catch {
console.log("ERROR");
}
},
async filterTeacher() {
const Course = {
title: "Programming", // For testing purpose
};
try {
await this.GetTeacherByCourse(Course);
} catch {
console.log("ERROR");
}
},
},
};