Programmatically changing the value in vuejs select

Question

I have a vuejs component that wraps a <select> like so:

 <select class="uk-select uk-width-expand" :value="selectedItem" @blur="validate" @change="onChanged($event.target.value)">
        <option disabled value="NOT_SELECTED">{{myResources.Placeholder}}</option>
        <option v-for="item in items" v-bind:value="item.Value" :key="item.Value">
            {{ item.Text }}
        </option>
    </select>

items is an array of objects that look like this:

{
Value: "JP",
Text: "Japan"
}

A common use case I'm dealing with is a list of countries where Value is the country code and Text is the country name. Everything works as it should - the dropdown is populated, when I select an item, the text appears in the <select> element's textbox, the correct value is emitted in @changed.

There is just one problem: Sometimes the component receives an initial value, and it needs to display it. I try to achieve this by setting selectedItem:

setInitialValue: function () {
      if (this.initialValue && this.items && this.items.length) {
                this.selectedItem = this.initialValue;
      }

However when this method is called, the <select> element displays nothing. Even though I can see the value is set properly. Even though when I manually select another item, it is displayed.

I've even tried to make sure the item I select is an actual object from the array the options are bound to:

 setInitialValue: function () {
  if (this.initialValue && this.items && this.items.length) {
            this.selectedItem = this.items.find(i => i.Value === this.initialValue.Value);
  }
},

No change. What am I missing?

EDIT: I also need that first option, the one with {{myResources.Placeholder}} to be displayed at the beginning if nothing is selected. Alternatively, I could just display the text, but it has to come from myResources which is a computed property.

KCP KCP · Accepted Answer · 2019-10-22T15:28:09

Use v-model in select to choose the option. Like:

 <select class="uk-select uk-width-expand" v-model="selectedItem"  @blur="validate" @change="onChanged($event.target.value)">
    <option disabled value="NOT_SELECTED">{{myResources.Placeholder}}</option>
    <option v-for="item in items" v-bind:value="item.Value" :key="item.Value">
        {{ item.Text }}
    </option>
</select>

where selectedItem can be the initial value like JP as per your data.

Programmatically changing the value in vuejs select

1 Answers