Vue后臺(tái)的數(shù)據(jù)可以獲取，但是綁定不到select option

html代碼：

  <div class="containter">
     <form action="" class="form-inline">
         <div class="form-group">
              <label for="#grade">年級(jí)：</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="#clazz">班級(jí)：</label>
              <select name="" id="clazz" class="form-control">
                    <option v-for="clazz in this.clazzList">{{clazz.name}}</option>
              </select>
          </div>    
       </form>
     </div>

script代碼：

new Vue({
    el:'.containter',
    data:{
        gradeList:[],
        clazzList:[],    
    },
// 數(shù)據(jù)初始化
    created(){
        // 獲取所有年級(jí)的數(shù)據(jù)
        $.getJSON('http://120.78.164.247:8080/grade/findAll',(result)=>{
            $('#grade').empty();
            this.gradeList = result.extend.data;     
            var currentGradeId = this.gradeList[0].id;
   
        // 根據(jù)第一個(gè)年級(jí)查找班級(jí)
            $.getJSON('http://120.78.164.247:8080/clazz/findByGradeId',{id:currentGradeId},function(result){
                  this.clazzList = result.extend.data; 
                  console.log(this.clazzList);
            })
        });

下面是效果圖：

第一個(gè)option的值是可以顯示出來(lái)的，第二個(gè)option我用了跟第一個(gè)一樣的方法，可以在控制臺(tái)獲取，但是頁(yè)面上顯示不出來(lái)。請(qǐng)大家?guī)兔匆幌拢x謝。（后臺(tái)數(shù)據(jù)是同學(xué)寫(xiě)的請(qǐng)忽略，不是有意的。）