在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ Vue后臺的數(shù)據(jù)可以獲取，但是綁定不到select option

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

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:[],    
    },
// 數(shù)據(jù)初始化
    created(){
        // 獲取所有年級的數(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è)年級查找班級
            $.getJSON('http://120.78.164.247:8080/clazz/findByGradeId',{id:currentGradeId},function(result){
                  this.clazzList = result.extend.data; 
                  console.log(this.clazzList);
            })
        });

下面是效果圖：
圖片描述
第一個(gè)option的值是可以顯示出來的，第二個(gè)option我用了跟第一個(gè)一樣的方法，可以在控制臺獲取，但是頁面上顯示不出來。請大家?guī)兔匆幌?，謝謝。（后臺數(shù)據(jù)是同學(xué)寫的請忽略，不是有意的。）

回答
編輯回答
淺淺

this指向問題 都用箭頭函數(shù)就好了

2018年3月13日 20:58
編輯回答
莓森

第二個(gè)請求里面的回調(diào)改成箭頭函數(shù)：

$.getJSON('http://120.78.164.247:8080/clazz/findByGradeId',{id:currentGradeId}, result => {
    this.clazzList = result.extend.data; 
    console.log(this.clazzList);
})
2017年1月31日 01:56