Vuetify radio button not appearing as checked

Question

I'm using Vue with Vuetify and currently have a form with a group of radio buttons:

<v-radio-group label="Active?">
  <v-radio name="active" label="No" value="0" v-bind:checked="active === 0"></v-radio>
  <v-radio name="active" label="Yes" value="1" v-bind:checked="active === 1"></v-radio>                
</v-radio-group>

On page load, active set to 1:

 data: {
    active: 1
} 

I see the input has checked="checked" but the icon remains as "radio_button_unchecked" so doesn't appear to be checked:

<input aria-label="Yes" aria-checked="false" role="radio" 
    type="radio" value="1" name="active" checked="checked">
<div class="v-input--selection-controls__ripple"></div>
<i aria-hidden="true" class="v-icon material-icons theme--light">radio_button_unchecked</i>

Image of vuetify radio button unchecked

If I click the radio button, it changes the icon to radio_button_checked, but on page load that doesn't seem to be happening. How can I get vuetify to load with radio_button_checked if the input it's associated with is checked?

Answer 1

The <v-radio> element does not support a "checked" attribute like <input type="radio"> does. Instead, the currently checked radio button is managed by the <v-radio-group> wrapper.

The following code should work:

<v-radio-group label="Active?" v-model="active">
  <v-radio name="active" label="No" :value="0"></v-radio>
  <v-radio name="active" label="Yes" :value="1"></v-radio>                
</v-radio-group>

According to the Vuetify docs all selection components must include a v-model prop, in this case, v-model="active". The radio group will then have it's value dependant on the "active" variable in your data. If the "active" value equals one of the :value="..." props in the <v-radio> elements, that element will be checked. See also this codepen.

Don't forget to append a : before your value prop or it won't be bound by Vue.

Answer 2

I came across an instance where the v-model solution just wouldn't work with what I was trying to accomplish. I came up with the following work around using the off-icon prop:

<v-radio
  :off-icon="item.active ? '$radioOn' : '$radioOff'"
/>