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

Question

[timur_khabibullin]

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

Хочу реализовать 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 )
 }
},
})

Comments

[NiceScript]

Вы имеете ввиду что option где-то должен быть disabled, но в целом select должен быть required?
Какая главная суть, чтобы выбрав родительский элемент верхнем select у нас в нижнем selecte показывались соответствующие options?
Чтобы ложные данные не отправлялись на сервер?

[timur_khabibullin]

NiceScript, да :-)