V-Binding Booleans with Radio Buttons

Question

I was trying to set the value of a radio button as a boolean and store this value, but when I did, it didn't seem to work.

<v-radio-group v-model="test" class="pl-2">
  <v-radio
    label="Yes"
    value="true"
    >
  </v-radio>
</v-radio-group>

I finally was able to get it to work when using V-Binding for the value:

<v-radio-group v-model="test" class="pl-2">
  <v-radio
    label="Yes"
    :value="true"
    >
  </v-radio>
</v-radio-group>

Can someone explain why this is the case? I feel like I am missing something in the documentation: https://v2.vuejs.org/v2/guide/forms.html#Radio-1

We are using the composition API, Nuxt framework, and Vuetify (not sure if that matters)

Answer 1

Attributes are strings by default, so in the first case of:

<v-radio value="true">

...the value prop is actually set to the string "true".

In the second case of:

<v-radio :value="true">

...the v-bind directive evaluates true as a JavaScript expression, and assigns the resulting Boolean to the value prop.