web-dev-qa-db-fra.com

Le bouton radio Vuetify n'apparaît pas comme coché

J'utilise Vue avec Vuetify et j'ai actuellement un formulaire avec un groupe de boutons radio:

<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>

Au chargement de la page, actif défini sur 1:

 data: {
    active: 1
}

Je vois que l'entrée a vérifié = "vérifié" mais l'icône reste comme "radio_button_unchecked" donc ne semble pas être vérifiée:

<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 du bouton radio vuetify non cochée

Si je clique sur le bouton radio, cela change l'icône en radio_button_checked, mais au chargement de la page, cela ne semble pas se produire. Comment faire pour que vuetify se charge avec radio_button_checked si l'entrée à laquelle il est associé est vérifiée?

vue.jsvuetify.js
3
Tom

L'élément <v-radio> Ne prend pas en charge un attribut "vérifié" comme le fait <input type="radio">. Au lieu de cela, le bouton radio actuellement coché est géré par l'encapsuleur <v-radio-group>.

Le code suivant devrait fonctionner:

<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>

Selon Vuetify docs tous les composants de sélection doivent inclure un accessoire de modèle en v, dans ce cas, v-model="active". Le groupe radio aura alors sa valeur en fonction de la variable "active" dans vos données. Si la valeur "active" est égale à l'un des accessoires :value="..." Dans les éléments <v-radio>, Cet élément sera vérifié. Voir aussi this codepen.

N'oubliez pas d'ajouter un : Avant votre valeur prop ou il ne sera pas lié par Vue.

7
Robb216