最近開始學(xué)習(xí)vue臀栈，在學(xué)習(xí)的過程中遇到的問題將記錄在這里。
今天遇到的第一個(gè)問題就是挠乳，select下拉列表設(shè)置默認(rèn)選中的問題权薯。
官方文檔傳送門
第1中方法，已知下拉列表的內(nèi)容
<div id="app">
<select v-model="selectedOption">
<option v-for="option in options" :value="option">{{option.city}}</option>
</select>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
selectedOption:{cityCode:0,city:"北京"},
options:[
{
cityCode:0,
city:"北京"
},{
cityCode:1,
city:"上海"
},{
cityCode:2,
city:"天津"
},{
cityCode:3,
city:"重慶"
}
]
}
})
第2中方法睡扬，數(shù)據(jù)是由后臺返回回來盟蚣，不能確定默認(rèn)項(xiàng)的具體數(shù)值
<div id="app">
<select v-model="selectedOption">
<option v-for="option in options" :value="option">{{option.city}}</option>
</select>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
selectedOption:{},
options:[]
},
created(){
this.$http.get('/api/cities').then((res)=>{
this.options = res.data;
this.selectedOption = this.options[0];
})
}
})
我一般選擇使用第2中方法，這樣如果后臺數(shù)據(jù)有修改卖怜，我這里的代碼也不需要修改屎开。而且此處的selectedOption是一個(gè)對象，是為了方便在后續(xù)中可能會(huì)需要使用其他數(shù)據(jù)马靠。
