how to Select automatically first value of dropdown in select input form?-CodePudding

i'm trying to get the first selection from my list, the dropdown is showing all options, but the first option (the selected) is null.

Below my code


<div class="form-group mb-6">
  <label class="form-label">{{ $trans('labels.department') }}</label>
  <select class="form-select" v-model="form.department_id">
    <option  :value="department.id" v-for="department in $page.departments">
      <p class="mt-1 text-sm leading-5 text-gray-500">
        {{ department.name }}
      </p>
    </option>
  </select>
</div>

CodePudding user response：

try initializing it inside created(). It will select the first option from the loop.

ex.

created() {
  this.form.department_id = this.$page.departments[0].id
}