差不多是一个 vue 二级联动的问题，但是有一些区别

 <div v-for="1 in num"> <div class="form-group"> <label for="">请选择广告页面</label> <select class="form-control" v-model="page[$index]" v-on:change="spotSelect($index)"> <option value="0" selected="selected">请选择广告页面</option> <option value="{{$key}}" v-for="page in pages">{{$key}}</option> </select> </div> <div class="form-group"> <label for="">请选择广告点位</label> <select class="form-control" v-model="spots_id[$index]"> <option value="0" selected = "selected">请选择广告点位</option> <option value="{{spot.id}}" v-for="spot in spots[test]" track-by="$index">{{test}}/{{spot.spotname}}</option> </select> </div> <div class="form-group"> <label for="">banner图</label> <input type="file" name="spot_pic[]"> </div> </div> <div class="form-group"> <button type="button" class="btn btn-primary" v-on:click="spotsAdd">添加广告位</button> </div> 

 spotsAdd : function(){ var vm = this; vm.num++ }, pageSelect: function() { var vm = this; $.ajax({ type : 'get', url : 'http://bankadmin.app/pagespots/select', data:{ token: $.cookie('token'), bankid:vm.banks_id, method:vm.method }, success : function(data) { //console.log(data); vm.pages = data; console.log(vm.pages.cf); } }); }, spotSelect: function(index) { var vm = this; vm.test = index; var o = vm.page[index]; vm.spots[index] = vm.pages[o]; //console.log(vm.pages[o]); console.log(index); console.log(vm.spots); console.log(vm.spots[index]); console.log(vm.spots[vm.test]); } 

如代码所显示的，点击按钮会把按钮上方的模块重新复制一份 差多不类似于12306购票，可以一直添加购买人数，除非抵达限制点 现在的情况就是，人都填写好了，没有问题，但是只要其中一个人的车票更换到其他省，那么其他人也一起变，可以抵达的城市随意选择，但是省就硬生生的给你确定了。