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指向问题 都用箭头函数就好了