差不多是一个 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购票，可以一直添加购买人数，除非抵达限制点现在的情况就是，人都填写好了，没有问题，但是只要其中一个人的车票更换到其他省，那么其他人也一起变，可以抵达的城市随意选择，但是省就硬生生的给你确定了。