下面我就為大家分享一篇vue select二級聯動第二級預設選取第一個option值的實例,具有很好的參考價值,希望對大家有所幫助。
當二級聯動例如選擇國家的時候,希望選中一個國家的時候後面城市默認選中第一個城市,則給國家的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]; },
上面是我整理給大家的,希望今後對大家有幫助。
相關文章:
以上是有關vue中如何實現二級聯動預設選取第一個值的詳細內容。更多資訊請關注PHP中文網其他相關文章!