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

当二级联动比如选择国家的时候，希望选中一个国家的时候后面城市默认选中第一个城市，

当二级联动比如选择国家的时候，希望选中一个国家的时候后面城市默认选中第一个城市，则给国家的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值的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。