Vue: cases à cocher avec modèle de tableau

Créé le 11 juil. 2015 · 3Commentaires · Source: vuejs/vue

Comment faire pour que quelque chose comme ça fonctionne ? :

<script>
new Vue({
  data: {
    languages: ['english', 'japanese', 'chinese']
    myLanguages: ['english', 'chinese']
  }
});
</script>
<span v-repeat='language : languages'>
  <input
    type='checkbox'
    value='{{ language }}'
    v-model='myLanguages'>
</span>

Source

robertleeplummerjr

Commentaire le plus utile

Que veux-tu qu'il se passe exactement ?
S'il s'agit d'une liste de cases à cocher et de leur état coché, vous pouvez conserver les langues sous forme d'objet plutôt que de chaîne.

<script>
new Vue({
  data: {
    languages: [
        {name: 'english', checked:true},
        {name: 'japanese', checked:false},
        {name: 'chinese', checked:true}
    ]
  }
});
</script>
<span v-repeat='language : languages'>
  <input
    type='checkbox'
    value='{{ language.name }}'
    v-model='language.checked'>
</span>

Vous pouvez ensuite utiliser un filtre/une carte pour récupérer les noms des langues sélectionnées.

Voici un jsfiddle le démontrant. http://jsfiddle.net/rmp135/v9vx9qyd/

rmp135 le 12 juil. 2015

👍3

Tous les 3 commentaires

Que veux-tu qu'il se passe exactement ?
S'il s'agit d'une liste de cases à cocher et de leur état coché, vous pouvez conserver les langues sous forme d'objet plutôt que de chaîne.

<script>
new Vue({
  data: {
    languages: [
        {name: 'english', checked:true},
        {name: 'japanese', checked:false},
        {name: 'chinese', checked:true}
    ]
  }
});
</script>
<span v-repeat='language : languages'>
  <input
    type='checkbox'
    value='{{ language.name }}'
    v-model='language.checked'>
</span>

Vous pouvez ensuite utiliser un filtre/une carte pour récupérer les noms des langues sélectionnées.

Voici un jsfiddle le démontrant. http://jsfiddle.net/rmp135/v9vx9qyd/

rmp135 le 12 juil. 2015

👍3

Je suppose que le cas d'utilisation consiste à utiliser les cases à cocher de la même manière que
vous utilisez une sélection avec la possibilité de sélectionner plusieurs sélections. Sorte de
un scénario « cocher tout ce qui s'applique », où les éléments à cocher proviennent d'un tableau
de possibilités.
Le 12 juillet 2015 à 9h43, "rmp135" [email protected] a écrit :

Que veux-tu qu'il se passe exactement ?
S'il s'agit d'une liste de cases à cocher et de leur état coché, vous pouvez maintenir le
langages comme un objet plutôt qu'une chaîne.

Vous pouvez ensuite utiliser un filtre/carte pour récupérer les noms des
langues.
Voici un jsfiddle le démontrant. http://jsfiddle.net/rmp135/v9vx9qyd/
-
Répondez directement à cet e-mail ou consultez-le sur GitHub
https://github.com/yyx990803/vue/issues/1037#issuecomment-120721497 .