[VUE.JS] R�cup�ration de variable � partir de @change

Version imprimable

Bonjour,

je pense que je n'ai pas encore de recul suffisant sur vue.js pour le r�soudre moi-m�me (3 ou 4 jours de pratique) et je viens vous demander un peu d'aide sur un bout de code (html, JS, vue.js).

le script en question est sens� g�n�rer une liste de checkbox et faire en sorte que, s'il y a 3 checkbox de coch�es, il grise les checkbox non-coch�es.
il est aussi capable de g�rer l'ordre des choix : si on d�coche un choix pour le remplacer par un autre cela n'affecte pas l'ordre des choix suivants.

Code:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="https://unpkg.com/[email protected]"></script>
  </head>
  <body>
  	<div id="app"><!--app=> "montage du script"-->
      <div class="list-of-yards">
        <label v-for="yard in yards">
 
          <!--:disabled et @change contiennent "un bout de code en JS" mais @change devrait contenir "changeThis(yard.id, yard.selected)"-->
          <!--Là c'est très moche !!!-->
 
          <p><input type="checkbox" v-model="yard.selected" :disabled="count == 3 && !yard.selected" @change="
          if(yard.selected){
             list.splice(list.indexOf(null), 1, yard.id);
             count++;
         } else {
             list.splice(list.indexOf(yard.id), 1, null);
             count--;
         }
          "> {{yard.name}}   {{yard.selected}}</p>
        </label>
          <p>list : {{list}}</p>
          <p>counter : {{count}}</p>
      </div>
    </div>
	<script type="text/javascript">
                new Vue({
                  el: '#app',
        // ici ce sont les données 
        // ("data: function()" juste à cause du v-for="yard in yards", du format de yards et une histoire sur le fonctionnement des checkbox...)
                          data: function() {
                            return {
            // ma liste de checkbox (id,nom,état)
                              yards: [
                                {id: 1, name: 'test 1', selected: false},
                                {id: 2, name: 'test 2', selected: false},
                                {id: 3, name: 'test 3', selected: false},
                                {id: 4, name: 'test 4', selected: false},
                        {id: 5, name: 'test 5', selected: false},
                        {id: 6, name: 'test 6', selected: false}
                              ],
            // ma liste de mes checkbox cochées sert entre autre à capturer l'ordre des cases cochées
            // sert aussi quand on décoche une checbox sur le premier choix de remplacer par une autre.
                                list: [null,null,null],
            // permet juste de compter les checbox coché pour griser les non-coché
                        count: 0
                            };
                          },
        // ici se trouve tout les traitement sur les évènement (methode marche mais computed est conseillé)
        computed: {
 
          //ma fameuse fonction
           changeThis: function(id, selected) {
 
            // J'arrive pas à faire passer id et selected (@change="changeThis(yard.id, yard.selected)" en théorie)
            // Du coup id = objet, selected = undefined (???)
            // Et pour finir "changeThis is not a function"
            // alors qu'il commence à l'exécuter : count-- ( bug ? & ???)
 
            // code que j'aurais voulu implanter en théorie.
 
            /*if(selected){
               Vue.set(this.list, this.list.indexOf(null), id);
               this.count++;
            } else {
               Vue.set(this.list, this.list.indexOf(id), null);
               this.count--;
            }*/
 
          }
       }
     });
 
 
        </script>
  </body>
</html>

Bref, comme montre les commentaires du code, j'essaie d'enlever le gros JS moche dans le param�tre @change.

Ps : si vous n'avez pas tout compris l'explication, le script fonctionne tel qu'il est en ce moment.

Citation:

Envoy� par ManuelCQE

Bonjour,

je pense que je n'ai pas encore de recul suffisant sur vue.js pour le r�soudre moi-m�me (3 ou 4 jours de pratique)

je viens de trouver ma r�ponse :

Code:

1
2
 
          <p><input type="checkbox" v-model="yard.selected" :disabled="count == 3 && !yard.selected" @change="changeThis((yard.id, yard.selected)"> {{yard.name}}   {{yard.selected}}</p>

en fait il faut retourner la fonction � @change de cette fa�on :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
           changeThis: function(id, selected) {
              return function(id, selected){
                if(selected){
                     this.list.splice(this.list.indexOf(null), 1, id);
                     this.count++;
                 } else {
                     this.list.splice(this.list.indexOf(id), 1, null);
                     this.count--;
                 }
              }
          }

:salut:

J'ai pris le temps de tester votre code, car je n'ai jamais utilis� vue.js jusqu'� aujourd'hui.

@change me donne une erreur dans la console (touche F12) Firefox. Avec v-on:change c'est bon :

Code:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue, test 1</title>
    <script src="https://unpkg.com/[email protected]"></script>
  </head>
  <body>
  	<div id="app">
      <div class="list-of-yards">
        <label v-for="yard in yards">
          <p>
            <input type="checkbox" v-model="yard.selected" v-on:change="changeThis(yard.id, yard.selected)" :disabled="count == 3 && !yard.selected">
            {{yard.name}} {{yard.selected}}
          </p>
        </label>
        <p>
          list : {{list}}
        </p>
        <p>
          counter : {{count}}
        </p>
      </div>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: function() {
          return {
            yards: [
              { id: 1, name: 'test 1', selected: false },
              { id: 2, name: 'test 2', selected: false },
              { id: 3, name: 'test 3', selected: false },
              { id: 4, name: 'test 4', selected: false },
              { id: 5, name: 'test 5', selected: false },
              { id: 6, name: 'test 6', selected: false }
            ],
            list: [ null, null, null ],
            count: 0
          };
        },
        computed: {
          changeThis: function( id, selected ) {
             return function( id, selected ){
               if ( selected ){
                  this.list.splice( this.list.indexOf( null ), 1, id );
                  this.count++;
                } else {
                  this.list.splice( this.list.indexOf( id ), 1, null );
                  this.count--;
                }
             }
           }
        }
      });
    </script>
  </body>
</html>