vue select二級聯動第二級預設選中第一個option值的執行個體，vueoption

vue select二級聯動第二級預設選中第一個option值的執行個體，vueoption

當二級聯動比如選擇國家的時候，希望選中一個國家的時候後面城市預設選中第一個城市，則給國家的select加一個@change事件就可以了

<div class="inputLine">  <span>所在地區</span>  <select name="" v-model="countryName" @change="selectCountry">  <option :value="item" v-for="(item,index) in area">  {{item.country}}  <svg class="icon icon-arrow-bottom" aria-hidden="true">  <use xlink:href="#icon-arrow-bottom" rel="external nofollow" rel="external nofollow" ></use>  </svg>  </option>  </select>  <select name="" v-model="cityName">  <option :value="item" v-for="(item,index) in countryName.city">  {{item}}  <svg class="icon icon-arrow-bottom" aria-hidden="true">  <use xlink:href="#icon-arrow-bottom" rel="external nofollow" rel="external nofollow" ></use>  </svg>  </option>  </select> </div>

data  countryName:{},  cityName:"請選擇城市",  area:[   {   "country":"美國",   "city":[    "紐約",    "洛杉磯",    "舊金山",    "西雅圖",    "波士頓",    "休斯頓",    "聖地亞哥",    "芝加哥",    "其它",   ]   },   {   "country":"加拿大",   "city":[    "溫哥華",    "多倫多",    "蒙特利爾",    "其它"   ]   },   {   "country":"澳大利亞",   "city":[    "雪梨",    "墨爾本",    "其它"   ]   },   {   "country":"新加坡",   "city":[    "新加坡"   ]   },   /*{   "country":"中國",   "city":[   "北京市",   ]   },*/  ],

methods:

selectCountry(value){  this.cityName=this.countryName.city[0];  },

以上這篇vue select二級聯動第二級預設選中第一個option值的執行個體就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。