有关vue中如何实现二级联动默认选中第一个值

当二级联动比如选择国家的时候，希望选中一个国家的时候后面城市默认选中第一个城市，则给国家的select加一个@change事件就可以了

<p 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>
 </p>

data
 countryName:{},
 cityName:"请选择城市",
 area:[
 {
 "country":"美国",
 "city":[
 "纽约",
 "洛杉矶",
 "旧金山",
 "西雅图",
 "波士顿",
 "休斯顿",
 "圣地亚哥",
 "芝加哥",
 "其它",
 ]
 },
 {
 "country":"加拿大",
 "city":[
 "温哥华",
 "多伦多",
 "蒙特利尔",
 "其它"
 ]
 },
 {
 "country":"澳大利亚",
 "city":[
 "悉尼",
 "墨尔本",
 "其它"
 ]
 },
 {
 "country":"新加坡",
 "city":[
 "新加坡"
 ]
 },
 /*{
 "country":"中国",
 "city":[
 "北京市",
 ]
 },*/
 ],

methods:

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Node.js中如何使用DNS模块（详细教程）

在Vue中如何操作自定义指令实现checkbox全选功能

怎样在vue中使用ts（详细教程）