Replacing strings with objects – select options elements

We also can use v-bind non-string values such as Object to the form inputs. See the following example:

// src/components/dynamic-values.vue
<select v-model="form.favourite">
  <option v-bind:value="{ title: 'On the Origin of Species' }">On 
   the Origin of Species</option>
</select>

export default {
  data () {
    return {
      form: {
        favourite: null
      }
    }
  }
}

Now when this option is selected, you get object for typeof this.favourite and On the Origin of Species for this.favourite.title. There is no change in the validation logic.

We also can render <option> elements dynamically with dynamic values and v-for:

// src/components/dynamic-values.vue
<select v-model="form.favourites" name="favourites_array[]" multiple >
  <option v-for="book in options.books" v-bind:value="book.value">
    {{ book.text }}
...