CODEWITHSUNDEEP
vue.js
adamb
adamb

Reputation: 833

Default value for select input doesn't appear, the select field is empty with Vue

I have a dropdown select, and using several css to remove some of the default look. But somehow when I load the page, the select field is empty, but it should show the default value. I can't make it work.

<select v-model="order.billing.address.country" :disabled="form" v-validate="'required'" name="country">
  <option selected disabled>{{$t('country')}}</option>
  <option value="AT">{{$t('AT')}}</option>
  <option value="BE">{{$t('BE')}}</option>
</select

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-border-radius: 0px;
}

can any of this make the problem, or the HTML part is wrong? I'm only having problem with the default value, after selecting something it works.

Upvotes: 1

Views: 8914

Answers (2)

Elpedio Jr. Adoptante
Elpedio Jr. Adoptante

Reputation: 101

Question: what is the expected default value, an empty string or the first option?

If empty string: you can update the first option to have a default value of empty. 

<option value="" disabled>{{$t('country')}}</option>

If the first option which is: 

<option value="AT">{{$t('AT')}}</option>

Remove:

<option value="-1" disabled>{{$t('country')}}</option>

And that should work I guess. If not then you have to trigger change on your select element to register the value.

Upvotes: 0

acdcjunior
acdcjunior

Reputation: 135752

When you use v-model, the selected in the DOM won't matter. The <select> will have as selected whatever value the v-model points to.

To have that <option> as selected, give it a value and set order.billing.address.country to it.

Example:

// somewhere in the code
order.billing.address.country = -1;

<select v-model="order.billing.address.country" :disabled="form" v-validate="'required'" name="country">
  <option value="-1" disabled>{{$t('country')}}</option>
  <option value="AT">{{$t('AT')}}</option>
  <option value="BE">{{$t('BE')}}</option>
</select

Upvotes: 2

Related Questions