Eigenschaft eines undefinierten Fehlers kann nicht gelesen werden: Falscher Klassenbindungstyp für Vue-gebundene Objekteigenschaft

Question

Ich versuche, eine Klasse basierend auf einer Objekteigenschaft zu binden, aber wenn ich auf das Listenobjekt klicke, um den @click auszulösen, teilt mir die Konsole mit, dass die Objekteigenschaft von isSelected nicht gelesen werden kann ... Ich' Ich versuche, dies für ein dynamisch gerendertes Listenelement zu tun. Verwenden Sie eine Funktion, um die ID des Elements zu empfangen und eine Klasse zur Aktivierung auszulösen, wenn diese Eigenschaft auf „false“ oder „true“ gesetzt ist

Hoffentlich kann mir jemand sagen, was mir im Code unten fehlt, danke :)

<ul class="daysList">
  <li v-for="Tag im Januar" "day.id">
      {{day.val}}
  </li>
  </ul>

Meine Vue-Daten

data:function(){
    zurückkehren{
      Jahr: 2021,
      Monat: 1,
      Tag 1,
      Tage:[18,19,20,21],
      Januar:[
          {Name: 'Januar', isSelected: false, id: 1, val:1},
          {name: 'Januar', isSelected: false, id: 2, val:2},
          {name: 'Januar', isSelected: false, id: 3, val:3},
          {name: 'Januar', isSelected: false, id: 4, val:4},
          {name: 'Januar', isSelected: false, id: 5, val:5},
          {name: 'Januar', isSelected: false, id: 6, val:6},
          {name: 'Januar', isSelected: false, id: 7, val:7},
          {name: 'Januar', isSelected: false, id: 8, val:8},
          {name: 'Januar', isSelected: false, id: 9, val:9},
          {name: 'Januar', isSelected: false, id: 10, val:10},
          {name: 'Januar', isSelected: false, id: 11, val:11},
          {Name: 'Januar', isSelected: false, id: 12, val:12},
          {name: 'Januar', isSelected: false, id: 13, val:13},
          {Name: 'Januar', isSelected: false, id: 14, val:14},
          {Name: 'Januar', isSelected: false, id: 15, val:15},
          {Name: 'Januar', isSelected: false, id: 16, val:16},
          {Name: 'Januar', isSelected: false, id: 17, val:17},
          {Name: 'Januar', isSelected: false, id: 18, val:18},
          {Name: 'Januar', isSelected: false, id: 19, val:19},
          {Name: 'Januar', isSelected: false, id: 20, val:20},
          {name: 'Januar', isSelected: false, id: 21, val:21},
          {Name: 'Januar', isSelected: false, id: 22, val:22},
          {name: 'Januar', isSelected: false, id: 23, val:23},
          {Name: 'Januar', isSelected: false, id: 24, val:24},
          {Name: 'Januar', isSelected: false, id: 25, val:25},
          {Name: 'Januar', isSelected: false, id: 26, val:26},
          {Name: 'Januar', isSelected: false, id: 27, val:27},
          {Name: 'Januar', isSelected: false, id: 28, val:28},
          {Name: 'Januar', isSelected: false, id: 29, val:29},
          {Name: 'Januar', isSelected: false, id: 30, val:30},
          {Name: 'Januar', isSelected: false, id: 31, val:31},

      ],
      Februar:[],
      Marsch:[],
      April:[],
      Mai:[],
      Juni:[],
      Juli:[],
      August:[],
      September:[],
      Oktober:[],
      November:[],
      Dezember:[],
     

    }
  },

应用于 isSelected == true 时的 CSS 类

.addedToTrip{
    Hintergrundfarbe: #2E9CFE;
    Rand oben: .5px einfarbig schwarz;
    Rand unten: .5px einfarbig schwarz;  
}

Answer 1

在指定类名时，你需要使用单引号

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>