vue实现下拉表单二级联动

<!--一级菜单-->
<select name="province" id="province" class="classify" v-on:change="indexSelect01" v-model="indexId">
  <option value="选择一级菜单">选择一级菜单</option>
  <option :value="item.id" v-for="(item,index) in select01">{{item.name}}</option>  <!---->
</select>
<!--二级菜单-->
<select name="city" id="city" class="classify mt10" v-model="indexId2">
  <option value="选择二级菜单">选择二级菜单</option>
  <option :value="k.id" v-for="k in select02">{{k.name}}</option>
</select>

<script type="text/ecmascript-6">
  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;
      }
    }
  }
</script>

{
  "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": [
                
            ]
          }
        ]
      }
    ]
  }
}