How to set selected="selected" in VueJS

Problem:  I have a select element. The options are populated using an array and while populating the select element I want to also set the selected value. How do I do this.

Solution

use v-bind:se;ected OR :selected with a boolean expression that returns TRUE or FALSE. If it returns TRUE that will be the selected value. See example below

<select class="allowed-colors"  >
  <option value="" >Select a color</option>
  <option v-for="allowed_color in team.allowed_colors" :value="allowed_color.value" :selected="allowed_color.value == team.color_assigned.value" >{{ allowed_color.text }}</option>
</select>