1. 程式人生 > >vue獲取下拉框值

vue獲取下拉框值

聲明 for 下拉 targe 賦值 bin 方式 div 解決

vue獲取下拉框的值,用vue-modle,只有點擊下拉框的值才會賦值到下拉框中,初始時下拉框沒有數據,而改用$event就不會出現這樣的問題,下面看代碼以及圖解: v-model解決方式: <!-- 下拉框 --> <div v-show="moreStore" class="select">   <select class="choice" v-on:change="indexSelect" v-model="indexId">     <option v-for="item in index" v-bind:value="item.indexId">{{item.name}}</option>
  </select> </div> 下拉框的值: index: [{   "indexId":1,   "name": "點菜用戶數"   }, {   "indexId":2,   "name": "點菜新用戶數"   }, {   "indexId":3,   "name": "首次留聯系方式人數"   }, {   "indexId":4,   "name": "已有聯系方式人數" }] 在這裏,indexId要在data裏面聲明一下 事件: // 獲取id值 indexSelect(){   console.log(this.indexId);//在這裏可以正確輸出每個下拉框對應的下標值,當然輸出值都是可以的
} 技術分享 改用$event的解決方式 <!-- 下拉框 --> <div v-show="moreStore" class="select">   <select class="choice" v-on:change="indexSelect($event)">     <option v-for="item in index" v-bind:value="item.indexId">{{item.name}}</option>   </select> </div> 事件: // 獲取value值 indexSelect(event){
  console.log(event.target.value); }, 圖示: 技術分享 當然,可以根據自己的項目需要來選擇哪種方法。在這裏,v-on:change也可以寫成v-on:click

vue獲取下拉框值