Filtrer automatiquement des select

Hello dear Vueiste!

I recently started development with Vue JS and here I am launching a first project.

Context of the project:

I would like to develop a school (college) management application with the following features:

  • Student management (Adding, modifying, deleting, monitoring …)
  • Teachers (Adding, modifying, deleting, monitoring …)
  • Classes
  • Courses management
  • Exam management

• Already done :
o Teachers: I can create, modify and delete a teacher
o Classes: : I can create, modify and delete a class
o Course: : I can create, modify and delete a course
o Assignment: I manage to create an assignment (Teacher-class-course) and i can edit and delete assignments.
o Assessments: I manage to create designs for a given course and class

• In progress :
o I currently try to enter the notes

For data entry, I have a modal that appears and allows to choose the class, course and assessment to grade.

The goal is that when you click on enter grades, that the list of students is displayed and that we can enter the grade of each student.

My problem in this modal is that I want to do instant filters but I can’t. That mean, when I select a class, the drop-down list of lessons automatically updates and only displays the lessons of the selected class.
Also, when I select the course (English for example) that the list of evaluations refreshes to display only the evaluations of the English course of the selected class. I don’t know if it’s explained well …

I have tried quite a few solutions but I am unable to do so. I thought the v-model with a get function would do the trick, but it crashes the app altogether.

This is the architecture of my application

.php (view) and main.js containing my vuejs code.
PHP API containing my backend and AXIOS to retrieve data via http requests
Bd MySql

  • Here is my code where apply for the modal

  • How i retrieve data for my dropdown list (course, class, assessments…)

As you can see I’m getting the class id well in the first select and want to filter the second select with this retrieved id (Id_classe).

If anyone can help me it will be greatly appreciated. Do not hesitate if my problem is not well explained or if you need more details.

Many things to you dear viewer and many thanks in advance to those who will take the time to read me and help me.

See you soon, I hope.