[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/vue@2.3.3"></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/vue@2.3.3"></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>