html Code:

  <div class="containter">
     <form action="" class="form-inline">
         <div class="form-group">
              <label for="-sharpgrade">:</label>
              <select name="" id="grade" class="form-control"  v-on:change="selectGrade($event)">
                   <option v-for="grade in this.gradeList" v-bind:id="grade.id" v-bind:value="grade.id">{{grade.name}}</option>
              </select>
          </div>
          <div class="form-group">
              <label for="-sharpclazz">:</label>
              <select name="" id="clazz" class="form-control">
                    <option v-for="clazz in this.clazzList">{{clazz.name}}</option>
              </select>
          </div>    
       </form>
     </div>

script Code:

new Vue({
    el:".containter",
    data:{
        gradeList:[],
        clazzList:[],    
    },
// 
    created(){
        // 
        $.getJSON("http://120.78.164.247:8080/grade/findAll",(result)=>{
            $("-sharpgrade").empty();
            this.gradeList = result.extend.data;     
            var currentGradeId = this.gradeList[0].id;
   
        // 
            $.getJSON("http://120.78.164.247:8080/clazz/findByGradeId",{id:currentGradeId},function(result){
                  this.clazzList = result.extend.data; 
                  console.log(this.clazzList);
            })
        });

the following is the effect:

the value of the first option can be displayed, and the second option can be obtained in the same way as the first one, but not displayed on the page. Please take a look at it. Thank you. The background data is written by the classmate. Please ignore it, not intentionally. )