Impossible de lire la propriété d'une erreur non définie : type de liaison de classe incorrect pour la propriété d'objet lié à Vue

Question

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

J'espère que quelqu'un pourra me dire ce qui me manque dans le code ci-dessous, merci :)

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

Mes données de vue

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 ;  
}

Answer 1

Lorsque vous spécifiez le nom de la classe, vous devez utiliser des guillemets simples

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>