Example code for implementing the secondary linkage effect of the drop-down box in Vue

"list": [
      {
        "id": "1178214681118568449",
        "title": "Backend Development",
        "children": [
          {
            "id": "1178214681139539969",
            "title": "Java"
          },
          {
            "id": "1178585108407984130",
            "title": "Python"
          },
          {
            "id": "1454645056483913730",
            "title": "C++"
          },
          {
            "id": "1454645056731377666",
            "title": "C#"
          }
        ]
      },
      {
        "id": "1178214681181483010",
        "title": "Front-end Development",
        "children": [
          {
            "id": "1178214681210843137",
            "title": "JavaScript"
          },
          {
            "id": "1178585108454121473",
            "title": "HTML/CSS"
          }
        ]
      },
      {
        "id": "1178214681231814658",
        "title": "Cloud Computing",
        "children": [
          {
            "id": "1178214681252786178",
            "title": "Docker"
          },
          {
            "id": "1178214681294729217",
            "title": "Linux"
          }
        ]
      },
      {
        "id": "1178214681324089345",
        "title": "System/Operation and Maintenance",
        "children": [
          {
            "id": "1178214681353449473",
            "title": "Linux"
          },
          {
            "id": "1178214681382809602",
            "title": "Windows"
          }
        ]
      },
      {
        "id": "1178214681399586817",
        "title": "Database",
        "children": [
          {
            "id": "1178214681428946945",
            "title": "MySQL"
          },
          {
            "id": "1178214681454112770",
            "title": "MongoDB"
          }
        ]
      },
      {
        "id": "1178214681483472898",
        "title": "Big Data",
        "children": [
          {
            "id": "1178214681504444418",
            "title": "Hadoop"
          },
          {
            "id": "1178214681529610242",
            "title": "Spark"
          }
        ]
      },
      {
        "id": "1178214681554776066",
        "title": "Artificial Intelligence",
        "children": [
          {
            "id": "1178214681584136193",
            "title": "Python"
          }
        ]
      },
      {
        "id": "1178214681613496321",
        "title": "Programming Language",
        "children": [
          {
            "id": "1178214681626079234",
            "title": "Java"
          }
        ]
      }
    ]

 <!-- Category TODO -->
      <el-form-item label="Course Category">
        <!--First level classification-->
        <el-select
          v-model="courseInfo.subjectParentId"
          placeholder="First level classification" @change="subjectLevelOneChanged">
          <el-option
            v-for="subject in subjectOneList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"/>
        </el-select>

        <!-- Secondary Category-->
        <el-select v-model="courseInfo.subjectId" placeholder="Please select">
          <el-option
            v-for="subject in subjectTwoList"
            :key="subject.value"
            :label="subject.title"
            :value="subject.id"/>
        </el-select>
      </el-form-item>

import course from '@/api/edu/course'
import subject from '@/api/edu/subject'
export default {
  data() {
    return {
      saveBtnDisabled: false, // Is the save button disabled? courseInfo:{
        title: '',
        subjectId: '', //Secondary category id
        subjectParentId:'', //First level classification id
        teacherId: '', //teacher id
        lessonNum: 0, //Lesson description: '', //Course introduction cover: '/static/01.jpg', //Default cover image price: 0
      },
      teacherList:[], //Encapsulate all lecturer data subjectOneList:[], //First-level classification subjectTwoList:[] , //Second-level classification BASE_API: process.env.BASE_API //Interface API address}
  },
  created() { //Executed before page rendering //Initialize all lecturers this.getListTeacher()
    //Initialize the first-level classification this.getOneSubject()
  },
  methods: {
    //Clicking a first-level category will trigger a change event and display the corresponding second-level category subjectLevelOneChanged(value){
        //value is the id value of the first-level classification//First traverse all the categories including the first and second levels for (var i = 0; i <this.subjectOneList.length; i++) {
        //Each first level classification var oneSubject=this.subjectOneList[i]
        //Judge: Are all first-level category ids the same as the clicked first-level category id if(value===oneSubject.id){ //=== that is, compare the value and type //Get all second-level categories from the first-level category this.subjectTwoList=oneSubject.children
          //Clear the secondary classification ID value this.courseInfo.subjectId=''
        }
      }
    },
    //Query all first-level categories getOneSubject(){
      subject.getSubjectList()
      .then(response=>{
        this.subjectOneList=response.data.list
      })
    }
  }
}
</script>