Vue JS set first item in a populated select to be selected

Question

I have an HTML select that is pre-populated with options from a server. When I use v-model, it selects an empty option when the page loads instead of the first option.

I found the post below as a possible solution, however, the data is populated from the server so I don't know what the first option will be.

Vue selected first option with v-model

<select id="group" v-model="group">
  <option value="Color">Color</option>
  <option value="Size">Size</option>
</select>

Asa Carter Asa Carter · Accepted Answer · 2018-07-07T09:54:52

I found the answer after a little more digging:

HTML:

<select id="group" ref="groupSelect" v-model="group">
  <option value="Color">Color</option>
  <option value="Size">Size</option>
</select>

JS:

mounted: function() {
  var groupSelect = this.$refs.groupSelect.children;

  if (groupSelect.length) {
    this.group = groupSelect[0].value;
  }
}

Vue JS set first item in a populated select to be selected

2 Answers