VUE监听select框

vue两个select框

监听第一个select框的选择的结果，传至给第二个框作为查询条件

<el-form-item label="学校代号" prop="schoolId" >
          <el-select v-model="form.schoolId" placeholder="请选择学校"  clearable size="small" @keyup.enter.native="handleQuery" @change="getSchoolChange">
            <el-option v-for="school in schoolList" :key="school.id" :value="school.id" :label="school.schoolName" id="schoolList">
              {{school.schoolName}}({{school.schoolTypeName}})
            </el-option>
          </el-select>
        </el-form-item> 
<el-form-item label="年级代号" prop="schoolId">
          <el-select v-model="form.gradeId" placeholder="请选择年级"  clearable size="small" @keyup.enter.native="handleQuery">
            <el-option v-for="i in gradeList" :key="i.id" :value="i.id" :label="i.gradeName">
              {{ i.gradeName }}
            </el-option>
          </el-select>
        </el-form-item>

关键@change="getSchoolChange"

 

methods: {
    getSchoolList(){
      this.loading = true;
      getSchoolList().then(response =>{
        this.schoolList = response.data;
        this.loading = false;
      });
    },
    getSchoolChange(val){
      getGradeList(val).then(response =>{
        this.gradeList = response.data;
      });
    },

在getSchoolChange（）方法里添加val

向后台传值

export function getGradeList(val){
  return request({
    url: '/system/grade/listBySchoolId?schoolId=' + val,
    method: 'get'
  })
}