Vue+ajax 3 단계 연동 실현

어떻게 Vue 를 이용 하여 3 급 연동 을 실현 합 니까?여기 서 우 리 는 Vue 구성 요 소 를 사용 하여 실현 합 니 다.쓸데없는 말 은 하지 않 고 건어물 HTML 에 올 립 니 다.

ajax.js 여기 서 저 는 원생 js 를 이용 하여 ajax 호출 을 실현 합 니 다(복습 할 때)

var proList = [];
var cityList = [];
var areaList = [];
createXmlHttpRequest();
//  XMLHttpRequest
      function createXmlHttpRequest(){
          if(window.XMLHttpRequest){
              return new XMLHttpRequest();
          }else{
              return new ActiveXObject("Microsoft.XMLHTTP");
          }
      }
      var url="/uploadServlet";
         //      XMLHttpRequest  
         XmlHttpRequest = createXmlHttpRequest();
         //      
         XmlHttpRequest.onreadystatechange=finish;
         //   xmlhttprequest
         XmlHttpRequest.open("GET",url,true);
         //    
         XmlHttpRequest.send(null);
         
         //ajax    
         function finish(){
             if(XmlHttpRequest.readyState == 4&& XmlHttpRequest.status == 200){
                 var result = XmlHttpRequest.responseText;
                 //             
                 var json = eval("(" + result + ")");
                  proList = json[0];
                  cityList  = json[1];
                  areaList = json[2];
             }
         }
         module.export = {
       		 proList,
       		 cityList,
       		 areaList 
         }

index.js 여 기 는 Vue 의 기 초 를 꼭 기억 해 야 합 니 다.template 는 하나의 노드 만 있 을 수 있 습 니 다.이 실 수 는 제 가 처음 했 을 때 저 질 렀 습 니 다.

var ajaxPar = require('./ajax');
var proRows = ajaxPar.proList;
var cityRows = ajaxPar.cityList;
var areaRows = ajaxPar.areaList;
Vue.component('province',{
    template:'
\
					    \
					    {{item.name}}\
					    \
					    \
					    {{item.name}}\
					    \
					    \
					        {{item.name}}\
					    \
				
',
    data: function () {
        return {
            proList: [],
            cityList: [],
            areaList: [],
            province: "",
            city: "",
            area: "",
        }
    },
    created: function () {
        this.proList= proRows;
        this.province= this.proList.length > 0 ? this.proList[0].id : "";

        var val = this.province;
        this.cityList= cityRows.filter(function (x) { return x.pid == val });
        this.city= this.cityList.length > 0 ? this.cityList[0].id : "";

        val = this.city;
        this.areaList= areaRows.filter(function(x){return x.pid == val});
        this.area= this.areaList.length > 0 ? this.areaList[0].id : "";
    },
    watch: {
        unitSelected: function (val) {
	        this.cityList= cityRows.filter(function (x) { return x.pid == val });
	        this.city= this.cityList.length > 0 ? this.cityList[0].id : "";
        },
        DepartmentSelected: function(val){
	        this.areaList= areaRows.filter(function(x){return x.pid == val});
	        this.area= this.areaList.length > 0 ? this.areaList[0].id : "";
        }
    }
})
new Vue({
    el: "#proCity"
})

만약 잘못 이 있 으 면 모두 가 지적 해 주시 기 바 랍 니 다!