#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>