Vuejs как автоматически выбрать раскрывающееся значение из базы данных

Question

У меня есть опция выбора

<label>Select Teacher</label>
<select class="form-control" name="teacher" v-model="form.teacher" :class="{ 'is-invalid': form.errors.has('teacher') }">
  <option :selected="teacher.id == form.teacher ? selected : null"   :value="teacher.id" v-for="teacher in teachers" :key="teacher.id">{{teacher.fullname}} - {{teacher.course}}</option>
</select>

Объект формы

form: new Form({
    id: '',
    room: '',
    teacher: '',
    subject: '',
    days: '',
    term: '',
    sem: '',
    start_time: '',
    end_time: '',
    schoolyr: '',
    scid:'',
}),

Функция редактирования

editModal(schedule) {
    $('#exampleModal').modal('show')
    this.form.fill(schedule)
    console.log(this.form)
},

Консоль говорит

Form {…}
busy: false
successful: false
errors: Errors
originalData: Object
id: 7
room: undefined
teacher: undefined
subject: undefined
days: undefined
term: "2"
sem: undefined
start_time: "10:30 PM"
end_time: "12:30 AM"
schoolyr: undefined
scid: 1

Я получил некоторые данные, например, потому что они имеют тип ввода текстового поля. но тег select не работает.

Я пытался написать :selected="teacher.id == form.teacher ? selected : null", но, похоже, ничего не происходит. Я использую vform пакет для отправки и редактирования форм. Метод this.forms.fill(data) работает, но только в текстовых полях, а не в выпадающих и переключателях.

Может кто-нибудь знать, что мне делать с этим? Большое спасибо.

Answer 1

<select class="form-control" name="teacher" v-model="form.teacher_id" :class="{ 'is-invalid': form.errors.has('teacher') }">
  <option :selected="teacher.id == form.teacher ? selected : null"   :value="teacher.id" v-for="teacher in teachers" :key="teacher.id">{{teacher.fullname}} - {{teacher.course}}</option>
</select>

Я понял это, добавив teacher_id в свой компонент данных и изменив teachers на teacher_id, и поэтому он становится неопределенным.