vue寫省市級聯動

<template>
    <div>
      <!-- 省 -->
      <select v-model="provinceid" @change="updatCity()">
          <option v-for="(item,index) in provinceArr" :value="item.name" :key="index" >{{item.name}}</option>
      </select>
      {{provinceid}}
        <!-- 市 -->
      <select v-model="shi" @change="updatShi()">
          <option v-for="(item,index) in shiArr" :key="index" :value="item.name" >{{item.name}}</option>
      </select>
        {{shi}}
        <select  v-model="qu"  >
          <option v-for="(item,index) in quArr" :key="index" :value="item">{{item}}</option>
      </select>
      {{qu}}
    </div>
</template>

<script>
export default{
    data(){
        return{
            // 數據
            // 存放默認市的
            provinceid:'北京市',
             provinceArr:[{
                name: "北京市",
                city: [{
                    name: "北京市",
                    districtAndCounty: ["東城區", "西城區", "崇文區", "宣武區", "朝陽區", "豐台區", "石景山區", "海淀區", "門頭溝區", "房山區", "通州區", "順義區", "昌平區", "大興區", "懷柔區", "平谷區", "密雲縣", "延慶縣", "延慶鎮"]
                }]
            }, {
                name: "重慶市",
                city: [{
                    name: "重慶市",
                    districtAndCounty: ["渝中區", "大渡口區", "江北區", "沙坪壩區", "九龍坡區", "南岸區", "北碚區", "萬盛區", "雙橋區", "渝北區", "巴南區", "萬州區", "涪陵區", "黔江區", "長壽區", "合川市", "永川區市", "江津市", "南川市", "綦江縣", "潼南縣", "銅梁縣", "大足縣", "榮昌縣", "璧山縣", "墊江縣", "武隆縣", "豐都縣", "城口縣", "梁平縣", "開縣", "巫溪縣", "巫山縣", "奉節縣", "雲陽縣", "忠縣", "石柱土家族自治縣", "彭水苗族土家族自治縣", "酉陽土家族苗族自治縣", "秀山土家族苗族自治縣"]
                }]
            }, {
                name: "河北省",
                city: [{
                    name: "石家庄市",
                    districtAndCounty: ["長安區", "橋東區", "橋西區", "新華區", "裕華區", "井陘礦區", "辛集市", "藁城市", "晉州市", "新樂市", "鹿泉市", "井陘縣", "微水鎮", "正定縣", "正定鎮", "欒城縣", "欒城鎮", "行唐縣", "龍州鎮", "靈壽縣", "靈壽鎮", "高邑縣", "高邑鎮", "深澤縣", "深澤鎮", "贊皇縣", "贊皇鎮", "無極縣", "無極鎮", "平山縣", "平山鎮", "元氏縣", "槐陽鎮", "趙縣", "趙州鎮"]
                }, {
                    name: "張家口市",
                    districtAndCounty: ["橋西區", "橋東區", "宣化區", "下花園區", "宣化縣", "張家口市宣化區", "張北縣", "張北鎮", "康保縣", "康保鎮", "沽源縣", "平定堡鎮", "尚義縣", "南壕塹鎮", "蔚縣", "蔚州鎮", "陽原縣", "西城鎮", "懷安縣", "柴溝堡鎮", "萬全縣", "孔家庄鎮", "懷來縣", "沙城鎮", "涿鹿縣", "涿鹿鎮", "赤城縣", "赤城鎮", "崇禮縣", "西灣子鎮"]
                }, {
                    name: "承德市",
                    districtAndCounty: ["雙橋區", "雙灤區", "鷹手營子礦區", "承德縣", "下板城鎮", "興隆縣", "興隆鎮", "平泉縣", "平泉鎮", "灤平縣", "灤平鎮", "隆化縣", "隆化鎮", "豐寧滿族自治縣", "大閣鎮", "寬城滿族自治縣", "寬城鎮", "圍場滿族蒙古族自治縣", "圍場鎮"]
                }, {
                    name: "秦皇島市",
                    districtAndCounty: ["海港區", "山海關區", "北戴河區", "昌黎縣", "昌黎鎮", "撫寧縣", "撫寧鎮", "盧龍縣", "盧龍鎮", "青龍滿族自治縣", "青龍鎮"]
                }]

            }],
            // 存放默認市的
            shi:"北京市",
            shiArr:[{name:"北京市"}],
            // 存放默認區的
            qu:"東城區",
            quArr:["東城區"]
        }
    },
    methods:{
        // 方法  切換城市要改變數據 
       updatCity(){
           var ref=this;
         this.provinceArr.forEach(function(item,index){
             if(item.name==ref.provinceid){
                 ref.shiArr=item.city;
                ref.shi=ref.shiArr[0].name; 
                 return;
             }
         })
            this.shiArr.forEach(function(item,index){
             if(item.name==ref.shi){
                 ref.quArr=item.districtAndCounty;
                  ref.qu=ref.quArr[0];
                 return;
             }
         }) 
         
       },
       updatShi(){
              var ref=this;
             this.shiArr.forEach(function(item,index){
             if(item.name==ref.shi){
                 ref.quArr=item.districtAndCounty;
                  ref.qu=ref.quArr[0];
                 return;
             }
         }) 
       }

    }

}
</script>

<style></style>