Выбранный не работает, когда я использую v-model?

#javascript #vue.js #vuejs2 #vue-component #v-model

#javascript #vue.js #vuejs2 #vue-компонент #v-модель

Вопрос:

Я знаю, что selected не работает, если я использую v-model , но я использую v-model , чтобы получить выбранного пользователя и использовать его в своей firebase, поэтому у меня есть такой html:

 <select v-model="medespeler1" class="inputbox rounded" required>
  <option v-for="(option, i) in medespelers" :key="i" :selected="selected">{{ medespelers[i] }}</option>
</select>
 

Затем в свойстве data я получил это, чтобы также получить все medespelers сохраненные в БД и medespeler1 значение:

 data: function() {
  return {
    medespelers:[],
    medespeler1: '',
  }
},
 

В firebase я устанавливаю все medespelers в массив и передаю его в свойство data, но поскольку мне нужно отправить medespeler1 значение в свойство data, я не могу использовать :selected , потому что это не сработает. С чего мне начать, чтобы он также сохранял medespeler1 значение и имел выбранный элемент в массиве?

Ответ №1:

Поскольку select используется medespeler1 для v-model , все, что нужно сделать, это установить значение medespeler1 и <select> будет реагировать на него:

 new Vue({
  el: "#app",
  data() {
    return {
      medespeler1: "banana"
    }
  }
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="medespeler1">
     <option>apple</option>
     <option>banana</option>
     <option>cherry</option>
  </select>
  
  Selected: {{ medespeler1 }}
</div>