Vue のドロップダウン ボックスのセカンダリ リンク効果を実装するためのサンプル コード

「リスト」: [
      {
        "id": "1178214681118568449",
        "title": "バックエンド開発",
        "子供たち"： [
          {
            "id": "1178214681139539969",
            「タイトル」: 「Java」
          },
          {
            "id": "1178585108407984130",
            「タイトル」: 「Python」
          },
          {
            "id": "1454645056483913730",
            "タイトル": "C++"
          },
          {
            "id": "1454645056731377666",
            "タイトル": "C#"
          }
        ]
      },
      {
        "id": "1178214681181483010",
        "title": "フロントエンド開発",
        "子供たち"： [
          {
            "id": "1178214681210843137",
            "タイトル": "JavaScript"
          },
          {
            "id": "1178585108454121473",
            "タイトル": "HTML/CSS"
          }
        ]
      },
      {
        "id": "1178214681231814658",
        "タイトル": "クラウドコンピューティング",
        "子供たち"： [
          {
            "id": "1178214681252786178",
            「タイトル」: 「Docker」
          },
          {
            "id": "1178214681294729217",
            「タイトル」: 「Linux」
          }
        ]
      },
      {
        "id": "1178214681324089345",
        "title": "システム/運用と保守",
        "子供たち"： [
          {
            "id": "1178214681353449473",
            「タイトル」: 「Linux」
          },
          {
            "id": "1178214681382809602",
            「タイトル」: 「Windows」
          }
        ]
      },
      {
        "id": "1178214681399586817",
        "title": "データベース",
        "子供たち"： [
          {
            "id": "1178214681428946945",
            「タイトル」: 「MySQL」
          },
          {
            "id": "1178214681454112770",
            「タイトル」: 「MongoDB」
          }
        ]
      },
      {
        "id": "1178214681483472898",
        "タイトル": "ビッグデータ",
        "子供たち"： [
          {
            "id": "1178214681504444418",
            「タイトル」: 「Hadoop」
          },
          {
            "id": "1178214681529610242",
            「タイトル」：「スパーク」
          }
        ]
      },
      {
        "id": "1178214681554776066",
        "タイトル": "人工知能",
        "子供たち"： [
          {
            "id": "1178214681584136193",
            「タイトル」: 「Python」
          }
        ]
      },
      {
        "id": "1178214681613496321",
        "title": "プログラミング言語",
        "子供たち"： [
          {
            "id": "1178214681626079234",
            「タイトル」: 「Java」
          }
        ]
      }
    ]

 <!-- カテゴリ TODO -->
      <el-form-item label="コースカテゴリ">
        <!--第 1 レベルの分類-->
        <el-選択
          v-model="コース情報.subjectParentId"
          placeholder="第 1 レベルの分類" @change="subjectLevelOneChanged">
          <el-オプション
            v-for="subjectOneList 内の subject"
            :key="件名.id"
            :label="件名.タイトル"
            :value="件名.id"/>
        </el-select>

        <!-- セカンダリ カテゴリ -->
        <el-select v-model="courseInfo.subjectId" placeholder="選択してください">
          <el-オプション
            v-for="subjectTwoList 内の subject"
            :key="件名.値"
            :label="件名.タイトル"
            :value="件名.id"/>
        </el-select>
      </el-form-item>

'@/api/edu/course' からコースをインポートします
'@/api/edu/subject' から subject をインポートします。
エクスポートデフォルト{
  データ（） {
    戻る {
      saveBtnDisabled: false, // 保存ボタンは無効になっていますか? courseInfo:{
        タイトル： ''、
        subjectId: '', //セカンダリカテゴリID
        subjectParentId:'', //第 1 レベルの分類 ID
        teacherId: '', //教師ID
        lessonNum: 0, //レッスンの説明: '', //コース紹介カバー: '/static/01.jpg', //デフォルトのカバー画像価格: 0
      },
      teacherList:[], //講師データをすべてカプセル化 subjectOneList:[], //第1レベルの分類 subjectTwoList:[] , //第2レベルの分類 BASE_API: process.env.BASE_API //インターフェースAPIアドレス}
  },
  created() { //ページレンダリング前に実行 //すべての講師を初期化 this.getListTeacher()
    //第1レベルの分類を初期化します this.getOneSubject()
  },
  メソッド: {
    //第 1 レベルのカテゴリをクリックすると変更イベントがトリガーされ、対応する第 2 レベルのカテゴリが表示されます subjectLevelOneChanged(value){
        //値は第1レベルの分類のID値です//まず、第1レベルと第2レベルを含むすべてのカテゴリを走査します for (var i = 0; i <this.subjectOneList.length; i++) {
        //各第1レベルの分類 var oneSubject=this.subjectOneList[i]
        //判断: すべての第 1 レベル カテゴリ ID がクリックされた第 1 レベル カテゴリ ID と同じかどうか if(value===oneSubject.id){ //=== つまり、値と型を比較します //第 1 レベル カテゴリからすべての第 2 レベル カテゴリを取得します this.subjectTwoList=oneSubject.children
          //二次分類ID値をクリアします this.courseInfo.subjectId=''
        }
      }
    },
    //第1レベルのカテゴリをすべてクエリする getOneSubject(){
      件名.getSubjectList()
      .then(応答=>{
        this.subjectOneList=レスポンスデータリスト
      })
    }
  }
}
</スクリプト>