<p>I'm trying to bind a class based on an object property, but when I click on the list object to trigger the @click, the console tells me that the object property of isSelected cannot be read... I'm trying to do this on a dynamically rendered list item Use a function to receive the item's id and trigger a class to activate when this property is set to false or true</p> <p>Hopefully someone can tell me what I'm missing in the code below, thanks :)</p> <pre class="brush:php;toolbar:false;"><ul class="daysList"> <li v-for="day in January" v-bind:class="{addedToTrip: day.isSelected}" class="daynum" @click="toggleIsSelected(day)" :key= "day.id"> {{day.val}} </li> </ul></pre> <p>My vue data</p> <pre class="brush:php;toolbar:false;">data:function(){ return{ year: 2021, month: 1, day: 1, days:[18,19,20,21], January:[ {name: 'January', isSelected: false, id: 1, val:1}, {name: 'January', isSelected: false, id: 2, val:2}, {name: 'January', isSelected: false, id: 3, val:3}, {name: 'January', isSelected: false, id: 4, val:4}, {name: 'January', isSelected: false, id: 5, val:5}, {name: 'January', isSelected: false, id: 6, val:6}, {name: 'January', isSelected: false, id: 7, val:7}, {name: 'January', isSelected: false, id: 8, val:8}, {name: 'January', isSelected: false, id: 9, val:9}, {name: 'January', isSelected: false, id: 10, val:10}, {name: 'January', isSelected: false, id: 11, val:11}, {name: 'January', isSelected: false, id: 12, val:12}, {name: 'January', isSelected: false, id: 13, val:13}, {name: 'January', isSelected: false, id: 14, val:14}, {name: 'January', isSelected: false, id: 15, val:15}, {name: 'January', isSelected: false, id: 16, val:16}, {name: 'January', isSelected: false, id: 17, val:17}, {name: 'January', isSelected: false, id: 18, val:18}, {name: 'January', isSelected: false, id: 19, val:19}, {name: 'January', isSelected: false, id: 20, val:20}, {name: 'January', isSelected: false, id: 21, val:21}, {name: 'January', isSelected: false, id: 22, val:22}, {name: 'January', isSelected: false, id: 23, val:23}, {name: 'January', isSelected: false, id: 24, val:24}, {name: 'January', isSelected: false, id: 25, val:25}, {name: 'January', isSelected: false, id: 26, val:26}, {name: 'January', isSelected: false, id: 27, val:27}, {name: 'January', isSelected: false, id: 28, val:28}, {name: 'January', isSelected: false, id: 29, val:29}, {name: 'January', isSelected: false, id: 30, val:30}, {name: 'January', isSelected: false, id: 31, val:31}, ], February:[], March:[], April:[], May:[], June:[], July:[], August:[], September:[], October:[], November:[], December:[], } },</pre> <p>应用于 isSelected == true 时的 css 类</p> <pre class="brush:php;toolbar:false;">.addedToTrip{ background-color: #2E9CFE; border-top: .5px solid black; border-bottom: .5px solid black; }</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>