vue select second level linkage second level selects the first option value by default

This article mainly shares with you an example of vue select second-level linkage selecting the first option value by default at the second level. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to take a look, I hope it can help everyone.

When the secondary linkage is, for example, selecting a country, and if you want to select a country, the subsequent city will select the first city by default, then just add a @change event to the country's select

<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];
  },

Related recommendations:

js implements Select secondary linkage example sharing in HTML

How to implement select select secondary linkage effect

The simplest js code to implement select secondary linkage drop-down menu_javascript skills

The above is the detailed content of vue select second level linkage second level selects the first option value by default. For more information, please follow other related articles on the PHP Chinese website!