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