Beispielcode zur Implementierung des sekundären Verknüpfungseffekts der Dropdown-Box in Vue

"Liste": [
      {
        "id": "1178214681118568449",
        "title": "Backend-Entwicklung",
        "Kinder": [
          {
            "id": "1178214681139539969",
            "Titel": "Java"
          },
          {
            "id": "1178585108407984130",
            "Titel": "Python"
          },
          {
            "id": "1454645056483913730",
            "Titel": "C++"
          },
          {
            "id": "1454645056731377666",
            "Titel": "C#"
          }
        ]
      },
      {
        "id": "1178214681181483010",
        "title": "Frontend-Entwicklung",
        "Kinder": [
          {
            "id": "1178214681210843137",
            "Titel": "JavaScript"
          },
          {
            "id": "1178585108454121473",
            "Titel": "HTML/CSS"
          }
        ]
      },
      {
        "id": "1178214681231814658",
        "Titel": "Cloud Computing",
        "Kinder": [
          {
            "id": "1178214681252786178",
            "Titel": "Docker"
          },
          {
            "id": "1178214681294729217",
            "Titel": "Linux"
          }
        ]
      },
      {
        "id": "1178214681324089345",
        "title": "System/Betrieb und Wartung",
        "Kinder": [
          {
            "id": "1178214681353449473",
            "Titel": "Linux"
          },
          {
            "id": "1178214681382809602",
            "Titel": "Windows"
          }
        ]
      },
      {
        "id": "1178214681399586817",
        "title": "Datenbank",
        "Kinder": [
          {
            "id": "1178214681428946945",
            "Titel": "MySQL"
          },
          {
            "id": "1178214681454112770",
            "Titel": "MongoDB"
          }
        ]
      },
      {
        "id": "1178214681483472898",
        "Titel": "Big Data",
        "Kinder": [
          {
            "id": "1178214681504444418",
            "Titel": "Hadoop"
          },
          {
            "id": "1178214681529610242",
            "Titel": "Funke"
          }
        ]
      },
      {
        "id": "1178214681554776066",
        "title": "Künstliche Intelligenz",
        "Kinder": [
          {
            "id": "1178214681584136193",
            "Titel": "Python"
          }
        ]
      },
      {
        "id": "1178214681613496321",
        "Titel": "Programmiersprache",
        "Kinder": [
          {
            "id": "1178214681626079234",
            "Titel": "Java"
          }
        ]
      }
    ]

 <!-- Kategorie TODO -->
      <el-form-item label="Kurskategorie">
        <!--Klassifikation der ersten Ebene-->
        <el-Auswahl
          v-Modell = "Kursinfo.SubjectParentId"
          Platzhalter="Klassifikation der ersten Ebene" @change="subjectLevelOneChanged">
          <el-Option
            v-for="Betreff in Betreff-EinerListe"
            :Schlüssel="Betreff.id"
            :label="Betreff.Titel"
            :Wert="Betreff.id"/>
        </el-Auswahl>

        <!-- Sekundärkategorie-->
        <el-select v-model="courseInfo.subjectId" Platzhalter="Bitte auswählen">
          <el-Option
            v-for="Betreff in BetreffZweiListe"
            :Schlüssel="Betreff.Wert"
            :label="Betreff.Titel"
            :Wert="Betreff.id"/>
        </el-Auswahl>
      </el-form-item>

Kurs importieren aus '@/api/edu/course'
Betreff aus „@/api/edu/subject“ importieren
Standard exportieren {
  Daten() {
    zurückkehren {
      saveBtnDisabled: false, // Ist die Schaltfläche „Speichern“ deaktiviert? courseInfo:{
        Titel: '',
        SubjectId: '', //Sekundäre Kategorie-ID
        subjectParentId:'', //Klassifikations-ID der ersten Ebene
        teacherId: '', //Lehrer-ID
        lessonNum: 0, // Unterrichtsbeschreibung: '', // Kurseinführungscover: '/static/01.jpg', // Standard-Coverbildpreis: 0
      },
      teacherList:[], //Kapseln Sie alle Dozentendaten subjectOneList:[], //Klassifikation der ersten Ebene subjectTwoList:[] , //Klassifikation der zweiten Ebene BASE_API: process.env.BASE_API //Adresse der Schnittstellen-API}
  },
  created() { //Wird vor dem Rendern der Seite ausgeführt //Alle Dozenten initialisieren this.getListTeacher()
    //Initialisiere die Klassifizierung der ersten Ebene this.getOneSubject()
  },
  Methoden: {
    //Durch Klicken auf eine Kategorie der ersten Ebene wird ein Änderungsereignis ausgelöst und die entsprechende Kategorie der zweiten Ebene angezeigt. subjectLevelOneChanged(value){
        //Wert ist der ID-Wert der Klassifizierung der ersten Ebene//Durchlaufen Sie zuerst alle Kategorien, einschließlich der ersten und zweiten Ebene für (var i = 0; i <this.subjectOneList.length; i++) {
        //Jede Klassifizierung der ersten Ebene var oneSubject=this.subjectOneList[i]
        //Beurteilen: Sind alle Kategorien-IDs der ersten Ebene gleich der angeklickten Kategorie-ID der ersten Ebene? if(value===oneSubject.id){ //=== d. h., vergleichen Sie den Wert und den Typ //Holen Sie sich alle Kategorien der zweiten Ebene aus der Kategorie der ersten Ebene this.subjectTwoList=oneSubject.children
          //Löschen Sie den sekundären Klassifizierungs-ID-Wert this.courseInfo.subjectId=''
        }
      }
    },
    //Alle Kategorien der ersten Ebene abfragen getOneSubject(){
      Betreff.getSubjectList()
      .dann(Antwort=>{
        this.subjectOneList=Antwort.Datenliste
      })
    }
  }
}
</Skript>