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 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
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.