-2
votes

Autoriser un seul bouton radio pour être vrai (obtenez la valeur de chaque élément.Value)

Je voudrais résoudre le problème suivant:

J'ai eu une structure de données comme celle-ci: xxx

maintenant je voudrais montrer un bouton radio pour Chaque option: xxx

résultat
Je peux cliquer sur chaque bouton radio et chaque `option.value est défini sur True .`
`Ce stylo montre le problème: HTTPS: // Codepen .io / spqrinc / stylo / nzbjz`
`Toutes les valeurs sont définies sur true , qui n'a aucun effet sur la radio-sélection.`

`Mon objectif Autoriser Un seul bouton radio pour être true . Sélectionnez voiture pour être true , car il est défini sur les données initiales. Maintenant ma question: < P> Je suppose que je pourrais utiliser un observateur pour regarder les options et surveiller une modification de la valeur et non défini toutes les autres valeurs. Mais est-ce la meilleure option?`

javascript vue.js vuejs2 5 commentaires Ils devraient avoir le même nom attribut Avez-vous envisagé d'utiliser un ComboBox à la place? Il devrait être plus adapté à ce que vous essayez d'accomplir. Dupliqué possible de composant de bouton radio Vuejs Bonjour Massimo, malheureusement, ce n'est pas une option, car l'utilisateur doit éditer le titre de chaque objet mais est censé "choisir" un seul. J'ai créé un codepen ( Codepen.io/spqrinc/pen/nzzbjz ) qui montre le problème. Je ne vois pas que ceci est un duplicata.

3 Réponses : 0 votes Vous devez définir un groupe de boutons radio en attribuant tous les boutons d'un groupe le même nom: https://developer.mozilla.org/en-us/docs/web/html/element/input/radio#defining_a_radio_group 3 commentaires Je l'ai fait maintenant - mais cela ne change pas option.value à false si une autre option est cueillie. Je ne sais pas comment Vue le fait, mais pour voir si un bouton radio est coché, vous utiliseriez un coché Prop: développeur.mozilla.org/en-us/docs/web/html/element/input/.../a> Ceci est un élément HTML et donc @Clarity a écrit que vous devez vous rapporter à l'attribut coché non valeur 0 votes Je ne code pas dans Vue JS mais : valeur = "vrai" semble être le problème .. Essayez de remplacer cela avec: valeur = "option.value" 0 commentaires 1 votes Il s'agit de boutons radio HTML de base doit être donné le même nom et une seule valeur peut être sélectionnée à la fois. Vérifiez l'expmle ci-dessous ... <input name="my_options" v-for="(option,index) in options" type="radio" :key="index" :id="index" :value="true" v-model="option.value"> 0 commentaires

Articles qui pourrait vous intéresser : Impossible d'importer le module "@ angular / material" Interaction profonde avec break and catch Utilisation de node.js comment renommer tous les fichiers d'un dossier Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO

Autoriser un seul bouton radio pour être vrai (obtenez la valeur de chaque élément.Value)

résultat Je peux cliquer sur chaque bouton radio et chaque option.value est défini sur True . Ce stylo montre le problème: HTTPS: // Codepen .io / spqrinc / stylo / nzbjz Toutes les valeurs sont définies sur true , qui n'a aucun effet sur la radio-sélection.

résultat
Je peux cliquer sur chaque bouton radio et chaque `option.value est défini sur True .`
`Ce stylo montre le problème: HTTPS: // Codepen .io / spqrinc / stylo / nzbjz`
`Toutes les valeurs sont définies sur true , qui n'a aucun effet sur la radio-sélection.`