用vue写 下拉框(select option)二级联动 ajax异步

首先 我的是从数据库 查询出来的班级表和级部表
下面是效果图

add.html

级部：<select  v-on:change="change()" v-model="jjid">
		<option value="0">---请选择---</option>
		<option v-for="ji in crr":value="ji.jid">{{ji.jname}}</option>
	</select><br>

	班级：<select name="cid" v-model="ccid" >
		<option value="0">---请选择---</option>
		<option v-for="cla in brr":value="cla.cid">{{cla.cname}}</option>
	</select><br>

js代码

var vm=new Vue({
	el:"#app",//定位到某个标签区域 在form表单之外
	data:{
		one:'hello vue.js!',
		ccid:"0",//学生表的外键
		brr:[],	//二级联动班级
		jjid:"0",//班级表的外键
		crr:[]	//二级联动级部
	},
	mounted(){//待domcoument结构加载完毕  自动执行里面的方法
		this.ji();
	},
	methods:{//自定义方法
		ji:function(){
			//查询级部的数据
			$.post("/db/getji",{},function(data){
				var len=data.length;
				vm.crr=[];
				for(var i=0;i<len;i++){
					vm.crr.push(data[i]);//给数组填数据
				}
			})
		},
		change:function(){
			var jjid=this.jjid;
			//查询班级的数据
			$.post("/db/getcla",{jjid:jjid},function(data){
				var len=data.length;
				vm.brr=[];//清空数据
				for(var i=0;i<len;i++){
					vm.brr.push(data[i]);
				}
			})
		}

	}
});

controller代码

	//查询级部表全部数据
	@RequestMapping("getji")
	@ResponseBody
	public List<Ji> getji() {
		return jiService.findAll();
	}
	//查询数据
	@RequestMapping("getcla")
	@ResponseBody
	public List<Cla> getcla(String jjid) {
		return claService.findByJjid(jjid);
	}
	

我是个很自律的人，既然我说了要写代码，那我就一直说。