vue select二级联动第二级默认选中第一个option值的实例

<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":[   "北京市",   ]   },*/  ],

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