@timur_khabibullin

Как сделать неактивный select на vue?

Доброго времени суток!

Хочу реализовать select с неактивным полем, также добавить, чтобы поле было обязательным для заполнения.

На данный момент стоят дефолтные данные, которые я записал во vue. Если клиент случайно нажимает submit - в бд заносится недостоверная информация. Такой вариант не подходит.

Сразу после обновления страницы исчезает.
<option selected disabled required>Выберите что-то</option>


Вот что есть сейчас:

HTML:
<div class="form-group">
      <select name="Course" id="Course" required class="form-control" v-model="selected.list1">
        <option v-for="option in list1" :value="option.id" v-text="option.Title" />
      </select>
    </div>
    <div class="form-group">
      <select name="MorningEvening" id="MorningEvening" required class="form-control" v-model="selected.list2">
       <option v-for="option in list2Select" :value="option.id" v-text="option.Title" />
     </select>
   </div>


VUE
new Vue({
   el: "#app",
   data: {
    list1: [ { id: 1, Title: 'Выбор 1' }, { id: 2, Title: 'Выбор 2' }, { id: 3, Title: 'Выбор 3' }  ],
    list2: [ 
    { id: 1, idForeign: 1, Title: '1' }, 
    { id: 2, idForeign: 2, Title: '2' }, 
    { id: 3, idForeign: 2, Title: '3' },  
    ],
    selected: {
     list1: 1,
     list2: 1,
   },
 },
 computed: {
  list2Select() {
   return this.list2.filter( option => option.idForeign == this.selected.list1 )
 }
},
})
  • Вопрос задан
  • 453 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы