Discussion :

[pitchounvivi]

Bonjour,

je sais que ce genre de question a déjà été posé, mais je n'arrive vraiment pas à appliquer ce que j'ai trouvé sur le net.
Actuellement j'ai des checkbox (5), qui sont créés à partir d'un mock (oui, le but c'est de comprendre et manipuler).

Mon code donne ça actuellement :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div
            v-for="item in getItems()"
            :key="item"
          >
<input
                :id="item.id"
                slot="input"
                type="checkbox"
                :name="item.code"
                :value="item.libelle"
                :checked="checked"
              >
              <label
                slot="label"
                :for="item.id"
              > {{ item.libelle }} </label>
</div>
            ... 
 
            <div v-show="messageMini">{{ $t('LIMITE_MINI') }}</div >
            <div v-show="messageMax">{{ $t('LIMITE_MAX') }}</div >

import du mock et du model pour remplir les attributs des checkbox

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
export default class ModalFiltre extends Vue {
  @Prop()
  private checked!: boolean;
 
  private messageMini = false;
  private messageMax = false;
 
 
//ici c'est le mock
getItems(): FiltreData[]{
    return [truc1,
    truc2,
    truc3,
    truc4,
    truc5];
  }
 
 
//ici la fonction qui doit compter les checkbox
  private checkItem() {
    let countItem = 0;
 
    for(let item in this.getItems){
      if(this.checked){
        countItem++;
      }
    }
    console.log('countItems = ' + countItem); 
 
    //si case cochée < 1 => messageMini
 
    //si case cochée > 4 => messageMax
 
  }

J'arrive donc pas à trouver un moyen pour que la fonction compte le nombre de checkbox cochée.
Le but étant que s'il n'y en a pas => j'affiche le message : nombre insuffisant
s'il y en a trop j'affiche un message nombre max dépassé.

Si je pouvais avoir juste un coup de main, c'est tout en Typescript.

Merci d'avance

[pitchounvivi]

J'ai un peu avancé sur le check des checkbox, mais j'ai pein de message dans ma console et je ne comprends pas trop pourquoi ...

Le code pour check-in

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
private checkItems(){
    let constantes = document.getElementsByTagName('ici il y a le nom du Design System qui est schématisée par la balise div');
    let countItem = 0;
 
    for(let i = 0; i < constantes.length; i++){ 
      if(this.checked){
        countItem++;
      } else {
        countItem--;
      }
    }
    console.log('countItems = ' + countItem);
  }

Mais je ne peux pas tester à cause de message dans ma console :

un premier :

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

un deuxième :

[Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.

???
Je pense que les messages m'empêchent de tester.

Autre problème, il faut que le compte soit synchronisé, puisque si j'ai trop de case cochées, il faut que le bouton de sauvegarde soit disabled.


=============================================
Alors rectification, je peux tester, mais en fait, il ne rentre jamais dans la boucle if(this.checked).

Un idée sur le comment le faire entrer dedans ?

[NoSmoking]

Bonjour,

pose toi la question : « mais que vaut this dans ma boucle ? ».

tu peux également essayer quelque chose de plus direct avec document.querySelectorAll(":checked") qui te retournera une NodeList des élément cochés.

A toi d'affiner la sélection.

[pitchounvivi]

Bonjour, bonjour,

j'ai pas eut le temps de mettre à jour mais j'ai finis par me trouver une solution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
private checkItems(){
    const elements = document.getElementsByTagName('input');
    let countItem = 0;
 
    for(let i = 0; i < elements.length; i+=1){ 
      if(elements[i].checked){
        countItem += 1;
      } 
    }
 
    if(countItem > 4){
      this.messageMax = true;
    } else if (countItem < 1) {
      this.messageMini = true;
    } else {
      this.messageMax = false;
      this.messageMini = false;
    }
  }

J'ai également modifié légèrement le template

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<input
                :id="item.id"
                slot="input"
                type="checkbox"
                :name="item.code"
                :value="item.libelle"
                :checked="checked"
                @click="checkItems()"
              >

mais je te remercie sincèrement d'avoir jeté un oeil.

Ca fait le travail, mais je pense que c'est un peu naïf comme façon de faire.

[NoSmoking]

Ca fait le travail, mais je pense que c'est un peu naïf comme façon de faire.

peut-être un peu compliqué lorsqu'un simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
checkItems() {
  const nbrChecked = document.querySelectorAll(":checked").length;
  this.messageMax = nbrChecked > 4;
  this.messageMini = nbrChecked < 1;
}

devrait suffire !

[pitchounvivi]

Re,


Merci. Effectivement c'est beaucoup plus réduit et ça fait aussi le travail.

Parfait !