Vue.js : Как получить атрибуты опции в раскрывающемся списке «Выбрать»?

#javascript #html #vue.js #dom

#javascript #HTML #vue.js #dom #v-модель

Вопрос:

Если мы свяжем значения поля выбора, как в следующем примере:

 <select v-model="car">
 <option number="one">BMW</option>
 <option number="two">Audi</option>
 <option number="three">Mercedes</option>
</select>
  

Как я могу получить значение number атрибута вместо названия автомобиля в Vue.js ?

Ответ №1:

Вы должны использовать value вместо number :

 <select v-model="car">
 <option value="one">BMW</option>
 <option value="two">Audi</option>
 <option value="three">Mercedes</option>
</select>
  

выбранное значение будет присвоено car свойству.

Пример :

 Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data() {
    return {
      car: ''
    }
  }
})  
 <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
  <select v-model="car">
    <option value="one">BMW</option>
    <option value="two">Audi</option>
    <option value="three">Mercedes</option>
  </select>
  
  {{car}}
</div>