TypeError: Cannot read properties of undefined for vue bind object property on class binding-CodePudding

I'm trying to bind a class based on an object property, but when I click the list object to trigger the @click the console tells me it can't read the object property for isSelected... I am trying to trigger a class to activate whenever the property changes on the list item being dynamically rendered using a function to take in the id of the item and set this prop to false or true

hoping someone can let me know what I'm missing in my code below thanks :)

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

my vue data

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:[],
     

    }
  },

my css class that applies when isSelected == true

.addedToTrip{
    background-color: #2E9CFE;
    border-top: .5px solid black;
    border-bottom: .5px solid black;  
}

CodePudding user response：

Look at this example on stackblitz: https://stackblitz.com/edit/vue-jdhe2f?file=src/components/ExampleComponent.vue

I hope to help you.

CodePudding user response：

You need to use single quotes while specifying classname

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