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

Question

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>

Is your dropdown not showing any items when you click on it? — dreiekk
– dreiekk, Commented Nov 25, 2021 at 14:44
is showing all options, but the first option (the selected) is null — valdimiro einstein
– valdimiro einstein, Commented Nov 25, 2021 at 14:47
Try to display it upon the condition that its value is not null — Billal BEGUERADJ
– Billal BEGUERADJ, Commented Nov 25, 2021 at 14:52

jrran90 · Accepted Answer · 2021-11-25 15:29:37Z

1

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
}

answered Nov 25, 2021 at 15:29

jrran90

69512 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related