<p>J'essaie de lier une classe basée sur une propriété d'objet, mais lorsque je clique sur l'objet de la liste pour déclencher le @click, la console me dit que la propriété d'objet de isSelected ne peut pas être lue... Je' J'essaie de faire cela sur un élément de liste rendu dynamiquement. Utilisez une fonction pour recevoir l'identifiant de l'élément et déclencher l'activation d'une classe lorsque cette propriété est définie sur false ou true</p> <p>J'espère que quelqu'un pourra me dire ce qui me manque dans le code ci-dessous, merci :)</p> <pre class="brush:php;toolbar:false;"><ul class="daysList"> <li v-for="jour de janvier" v-bind:class="{addedToTrip: day.isSelected}" class="daynum" @click="toggleIsSelected(day)" :key= "day.id"> {{jour.val}} ≪/li> </ul></pre> <p>Mes données de vue</p> <pre class="brush:php;toolbar:false;">data:function(){ retourner{ année : 2021, mois : 1, jour : 1, jours :[18,19,20,21], Janvier:[ {nom : 'Janvier', isSelected : false, id : 1, val:1}, {nom : 'Janvier', isSelected : false, id : 2, val:2}, {nom : 'Janvier', isSelected : false, id : 3, val:3}, {nom : 'Janvier', isSelected : false, id : 4, val:4}, {nom : 'Janvier', isSelected : false, id : 5, val:5}, {nom : 'Janvier', isSelected : false, id : 6, val:6}, {nom : 'Janvier', isSelected : false, id : 7, val:7}, {nom : 'Janvier', isSelected : false, id : 8, val:8}, {nom : 'Janvier', isSelected : false, id : 9, val:9}, {nom : 'Janvier', isSelected : false, id : 10, val:10}, {nom : 'Janvier', isSelected : false, id : 11, val:11}, {nom : 'Janvier', isSelected : false, id : 12, val:12}, {nom : 'Janvier', isSelected : false, id : 13, val:13}, {nom : 'Janvier', isSelected : false, id : 14, val:14}, {nom : 'Janvier', isSelected : false, id : 15, val:15}, {nom : 'Janvier', isSelected : false, id : 16, val:16}, {nom : 'Janvier', isSelected : false, id : 17, val:17}, {nom : 'Janvier', isSelected : false, id : 18, val:18}, {nom : 'Janvier', isSelected : false, id : 19, val:19}, {nom : 'Janvier', isSelected : false, id : 20, val:20}, {nom : 'Janvier', isSelected : false, id : 21, val:21}, {nom : 'Janvier', isSelected : false, id : 22, val:22}, {nom : 'Janvier', isSelected : false, id : 23, val:23}, {nom : 'Janvier', isSelected : false, id : 24, val:24}, {nom : 'Janvier', isSelected : false, id : 25, val:25}, {nom : 'Janvier', isSelected : false, id : 26, val:26}, {nom : 'Janvier', isSelected : false, id : 27, val:27}, {nom : 'Janvier', isSelected : false, id : 28, val:28}, {nom : 'Janvier', isSelected : false, id : 29, val:29}, {nom : 'Janvier', isSelected : false, id : 30, val:30}, {nom : 'Janvier', isSelected : false, id : 31, val:31}, ], Février:[], Mars:[], Avril:[], Peut:[], Juin:[], Juillet:[], Août:[], Septembre:[], Octobre:[], Novembre:[], Décembre:[], } },</pré> <p>应用于 isSelected == true en CSS 类</p> <pre class="brush:php;toolbar:false;">.addedToTrip{ couleur d'arrière-plan : #2E9CFE ; bordure supérieure : 0,5 px, noir uni ; bordure inférieure : 0,5 px, noir uni ; }</pre></p>

ul class="daysList">
  <li v-for="day in January" v-bind:class="{'addedToTrip': day.isSelected}" class="daynum" @click="toggleIsSelected(day)" :key="day.id"> // 改变 added
      {{day.val}}
  </li>
  </ul>