vueドロップダウンフォームの2段階連動を実現

        
  {
    {item.name}}  



        
  {
    {k.name}}

  import axios from 'axios'
  export default {
    data(){
      return{
        select01: [],//         
        select02: [],//         
        indexId:'      ',//         
        indexId2:'      ',
        indexNum:0,//         

      }
    },
    mounted(){
        //  json    
      axios.get('xxxxxxxxxxxxxxxxxxxxxxxxxx',{
        //xxxxxxxxxxxxxxxxxxx
      })
        .then((res) => {
          let mes = res.data;
          this.select01 = mes.subject;
          this.indexSelect01();
        })
        .catch((error) => {
          console.log(error)
        });
    },
    methods:{
      indexSelect01(){
        let i = 0;
        for (i = 0;i<this.select01.length;i++) {
          if (this.select01[i].id == this.indexId){
            this.indexNum = i;
            break
          }
        }

        this.select02 = this.select01[this.indexNum].obj;
      }
    }
  }

{
  "data": {
    "subject": [
      {
        "id": 1,
        "name": "xx01",
        "obj": [
          {
            "id": 3,
            "name": "xxxx01",
            "obj": [
                
            ]
          },
          {
            "id": 4,
            "name": "xxxx02",
            "sub": [
                
            ]
          },
          {
            "id": 5,
            "name": "xxxx03",
            "obj": [
                
            ]
          }
        ]
      },
      {
        "id": 2,
        "name": "xx02",
        "obj": [
          {
            "id": 6,
            "name": "xxxx01",
            "obj": [
                
            ]
          },
          {
            "id": 7,
            "name": "xxxx02",
            "obj": [
                
            ]
          },
          {
            "id": 8,
            "name": "xxxx03",
            "obj": [
                
            ]
          }
        ]
      }
    ]
  }
}