Regarding how to implement secondary linkage in Vue, the first value is selected by default-JS Tutorial-php.cn

Regarding how to implement secondary linkage in Vue, the first value is selected by default

亚连

Release： 2018-06-12 17:06:24

Original

2119 people have browsed it

Below I will share 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.

When the secondary linkage is, for example, selecting a country, 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>

Copy after login

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

Copy after login

methods:

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

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to use the DNS module in Node.js (detailed tutorial)

How to operate customization in Vue Instructions to implement the checkbox full selection function

How to use ts in vue (detailed tutorial)

The above is the detailed content of Regarding how to implement secondary linkage in Vue, the first value is selected by default. For more information, please follow other related articles on the PHP Chinese website!