web-dev-qa-db-fra.com

composant bouton radio vuejs

J'essaie de faire fonctionner ce composant de bouton radio personnalisé dans vuejs. Comment puis-je faire cocher le bouton radio avec une valeur du composant parent. Je sais que vous utilisez le modèle v et le définissez sur une même valeur dans l'une des valeurs d'entrée, mais il ne semble pas que cela fonctionne.

composant:

export default Vue.component('radioButton', {
  template,
  props: ['name', 'label', 'id', 'value']
})

modèle de composant:

<label class="radio" :for="id">
  <input type="radio" :id="id" class="radio-button" :value="value" :name="name">
   <span class="radio-circle">
  </span>
  <span class="radio-circle__inner">
  </span>
  <span class="radio-button__label">{{ label }}</span>
</label>

html:

<radio-button name="options" id="option-1" label="1" :value="selectedValue" />
<radio-button name="options" id="option-2" label="2" :value="selectedValue" />
radio-buttonvue.jsvue-component
10
Walraz

Pour les boutons radio, vous devez passer true ou false pour que la propriété cochée prédéfinisse un état. Alternativement, votre valeur dans v-model Doit être égale à value du bouton radio pour qu'elle soit vérifiée.

Dans l'exemple de code limité que vous avez publié, je pense que votre étiquette est l'index des boutons comme 1, 2, 3 Et ainsi de suite ... Et je pense que vous voulez sélectionnez l'un des boutons lorsque selectedValue correspond à label de ce bouton radio. Par exemple, si selectedValue est 2, vous voulez que le bouton radio 2 soit coché.

En supposant que ce qui précède est correct, vous devez apporter une modification d'une ligne dans votre modèle de composant radio-button:

<input type="radio" class="radio-button" :value="label" :name="name" v-model="value">

Remarque:

  1. Votre bouton label est la valeur du bouton radio. C'est ce que vous attendez de définir sur selectedValue lorsque vous cliquez sur un bouton radio particulier.

  2. Votre value dans le composant enfant est en fait selectedValue du composant parent, ce qui indique le bouton radio actuellement choisi. Cela devrait donc aller dans v-model

Ainsi, selon les documents sur Liaisons d'entrée de formulaire , votre bouton radio sera vérifié si la variable du modèle v est égale à la valeur de ce bouton radio.

Mais voici maintenant un autre problème: si vous cliquez sur un autre bouton radio, vous vous attendez à ce que le selectedValue du composant parent change. Cela ne se produira pas car props vous donne uniquement une liaison unidirectionnelle.

Pour résoudre ce problème, vous devez effectuer une émission $ à partir de votre composant enfant (bouton radio) et le capturer dans le composant parent (votre formulaire).

Voici un exemple de jsFiddle fonctionnel: https://jsfiddle.net/mani04/3uznmk72/

Dans cet exemple, votre modèle de formulaire définit les composants des boutons radio comme suit:

<radio-button name="options" label="1" :value="selectedValue" @change="changeValue"/>
<radio-button name="options" label="2" :value="selectedValue" @change="changeValue"/>

Chaque fois que la valeur change à l'intérieur du composant enfant, il passera un événement "change" avec l'étiquette du bouton radio, qui sera passé à la méthode changeValue() du composant de formulaire parent. Une fois le composant parent modifié selectedValue, vos boutons radio se mettent à jour automatiquement.

J'espère que ça aide!

12
Mani

Personnellement, je le ferais d'une autre manière, pour conserver une directive v-model et éviter un événement @change (qui pourrait être remplacé par @input si une autre logique doit être exécutée). Le problème ici est que la valeur du modèle v est égale aux accessoires "value" dans le composant du bouton radio.

props: {
    value: {},
    v_value: {},
    ....
}

Donc, tout ce que vous avez à faire est de passer la vraie valeur actuelle pour faire quelques vérifications et $ émettre la valeur en cliquant sur une étiquette, ou en changeant sur l'entrée si vous n'avez pas d'étiquette.

<label :for="id" @click="$emit('input', v_value)">
      <input type="radio" :value="label" :name="name" :id="id" /> {{ label }}
</label>

J'ai également ajouté (mais je l'ai commenté) une version avec un simple balisage html au cas où vous souhaiteriez des boutons radio personnalisés:

<div class="label" @click="$emit('input', v_value)">
      <span>{{ label }}</span>
</div>

https://jsfiddle.net/Zyfraglover/ndcp8t6e/

1
ZyDucksLover