Vue后台的数据可以获取，但是绑定不到select option

Question

html代码：

  <div class="containter">
     <form action="" class="form-inline">
         <div class="form-group">
              <label for="#grade">年级：</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">班级：</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:[],    
    },
// 数据初始化
    created(){
        // 获取所有年级的数据
        $.getJSON('http://120.78.164.247:8080/grade/findAll',(result)=>{
            $('#grade').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);
            })
        });

下面是效果图：

第一个option的值是可以显示出来的，第二个option我用了跟第一个一样的方法，可以在控制台获取，但是页面上显示不出来。请大家帮忙看一下，谢谢。（后台数据是同学写的请忽略，不是有意的。）

Answer 1

this指向问题 都用箭头函数就好了

Answer 2

第二个请求里面的回调改成箭头函数：

$.getJSON('http://120.78.164.247:8080/clazz/findByGradeId',{id:currentGradeId}, result => {
    this.clazzList = result.extend.data; 
    console.log(this.clazzList);
})