modèle vuejs pour le groupe de cases à cocher

Question

J'ai 2 tableaux, un pour les variantes de cases à cocher possibles et un pour les cases déjà enregistrées. Modèle VUEJS par exemple

<ul>
                <li v-for="cit in possable">
                    <label>
                    <input  
                        type="checkbox"
                        :checked="savedcbx.indexOf(+cit.id)>-1"
                        :value="cit.id"/>
                    {{cit.rname}}
                    </label>
                </li>
            </ul>

Et ma question sur la façon d'ajouter une nouvelle case à cocher pour enregistrer le tableau ou supprimer du tableau enregistré décocher la case

arrays vue.js checkboxlist

1

Sultan Zhumatayev 21 avril 2017 à 12:34

Answer 1

Je viens de mettre savecbx sur le modèle et cela fonctionne comme dans la réponse ci-dessus. Vue super chose.

             <ul>
            <li v-for="cit in possable">
                <label>
                <input  
                    type="checkbox"
                    v-model="savedcbx"

                    //with model this not need too 
                    :checked="savedcbx.indexOf(+cit.id)>-1"
                    :value="cit.id"/>
                {{cit.rname}}
                </label>
            </li>
        </ul>

3

Sultan Zhumatayev 24 avril 2017 à 05:08

Answer 2

Donc, en supposant que vous ayez ces données:

data() {
  return {
    possable: [1,2,3,4,5],
    savedcbx: [3,4]
   }
}

Si vous souhaitez ajouter un nouvel élément dans savedcbx, il vous suffit de le pousser dans le tableau (assurez-vous qu'il n'existe pas déjà)

addSavedId (id) {
  // Don't add it if it already exists
  if(this.savedcbx.indexOf(id) !== -1) return;

  this.savedcbx.push(id);
}

Pour supprimer un élément:

removeSavedId (id) {
  let index = this.savedcbx.indexOf(id);

  // Nothing to remove if item is not in array
  if(index === -1) return;

  // Remove `index`
  this.savedcbx.splice(index, 1);
}

Et maintenant c'est à vous quand vous appelez les fonctions addSavedId(id) et removeSavedId(id) et quel est le paramètre id.

2

XCS 21 avril 2017 à 09:45

Answer 3

Vous n'avez besoin que d'un seul tableau pour effectuer la commutation. Dans la section Arrays de la documentation Vue.js:

HTML:

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

Application Vue:

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

4

lauri108 30 mai 2018 à 08:25

modèle vuejs pour le groupe de cases à cocher

3 réponses

De nouvelles questions

arrays