Replacing strings with dynamic properties – radio elements

As for the radio button <input> elements, we can bind their values to the dynamic property in the Vue instance by using v-bind:

// src/components/dynamic-values.vue
<input type="radio" v-model="form.gender" v-bind:value="gender.male">

export default {
  data () {
    return {
      gender: {
        male: 'm',
        female: 'f',
        other: 'o',
      },
      form: { gender: null }
    }
  }
}

Now you get m when this radio button is picked and the validation is the same as before.