V-for et input mdl-radio


#1

Bonjour à tous,

Je dois rendre une série de input de type radio dans un v-for. Si je fait :

<div  v-for="(va, ka) in catEvenements" :key="'catEvenements_' + ka">
    <input type="radio" name="test" :id="'id_' + ka" :value="catEvenements[ka].cat" v-model="newPublication[0].cat">
        <label for="test">{{catEvenements[ka].cat}}</label>
</div>

tout fonctionne impecc. ( la value de l’input cliqué est bien reportée dans ma data newPublication[0].cat )

Par contre si j’utilise la version material design lite :

<div  v-for="(va, ka) in catEvenements" :key="'catEvenements_' + ka">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="test">
<input class="mdl-radio__button" type="radio" name="test" :id="'catEvenementsId_' + ka" :value="catEvenements[ka].cat"  v-model="newPublication[0].cat">
        <span class="mdl-radio__label capitale">{{catEvenements[ka].cat}}</span></label>
      </div>

là impossible de sélectionner un input…

Si j’ai bien compris ce serai t un problème de “checked”… mais j’arrive pas à comprendre…

Un coup de pouce ?


#2

Salut,

J’essaierai avec :checked=“newPublication[0].cat” dans ton input et peut être sans le :value


#3

Merci pour la réponse mais ca ne fonctionne pas… :frowning:


#4

Ok bon déjà désolé mais j’ai écrit trop vite jvoulais dire :checked=“catEvenements[ka].cat” sans le :value=“catEvenements[ka].cat” (sur VUE JS jl’aurais fait comme ça)


#5

Hi, non marche pas non plus…

Bon finalement j’ai résolu le probleme en utilisant vue•mdc•adapter

<mdc-radio :id="'catEvenementsId_' + ka" name="catEvenements" :value="catEvenements[ka].cat" v-model="newPublication[0].cat" :label="catEvenements[ka].cat"></mdc-radio>

Merci d’avoir pris le temps de répondre


#6

Jt’en prie bon courage pour la suite


#7

tes labels sont liés à tous i.e au 1er radio, il faut utiliser

:for="'catEvenementsId_' + ka"