最近开始学习vue,在学习的过程中遇到的问题将记录在这里。
今天遇到的第一个问题就是,select下拉列表设置默认选中的问题。
官方文档传送门
第1中方法,已知下拉列表的内容
<div id="app">
<select v-model="selectedOption">
<option v-for="option in options" :value="option">{{option.city}}</option>
</select>
<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中方法,数据是由后台返回回来,不能确定默认项的具体数值
<div id="app">
<select v-model="selectedOption">
<option v-for="option in options" :value="option">{{option.city}}</option>
</select>
<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];