정의되지 않은 오류의 속성을 읽을 수 없습니다: Vue 바인딩된 개체 속성에 대한 클래스 바인딩 유형이 잘못되었습니다.

Question

객체 속성을 기반으로 클래스를 바인딩하려고 하는데 @click을 트리거하기 위해 목록 객체를 클릭하면 콘솔에서 isSelected의 객체 속성을 읽을 수 없다는 메시지가 나타납니다. 동적으로 렌더링된 목록 항목에서 이 작업을 수행하려고 합니다. 함수를 사용하여 항목의 ID를 받고 이 속성이 false 또는 true로 설정된 경우 활성화할 클래스를 트리거합니다

누군가가 아래 코드에서 누락된 부분을 알려줄 수 있기를 바랍니다. 감사합니다. :)

<ul class="daysList">
  <li v-for="1월의 일" v-bind:class="{ addedToTrip: day.isSelected}" class="daynum" @click="toggleIsSelected(day)" "day.id">
      {{day.val}}
  </li>
  
<p>내 뷰 데이터</p>
<pre class="brush:php;toolbar:false;">data:function(){
    반품{
      연도: 2021,
      월: 1,
      일: 1,
      일:[18,19,20,21],
      1월:[
          {이름: '1월', isSelected: false, id: 1, val:1},
          {이름: '1월', isSelected: false, id: 2, val:2},
          {이름: '1월', isSelected: false, id: 3, val:3},
          {이름: '1월', isSelected: false, id: 4, val:4},
          {이름: '1월', isSelected: false, id: 5, val:5},
          {이름: '1월', isSelected: false, id: 6, val:6},
          {이름: '1월', isSelected: false, id: 7, val:7},
          {이름: '1월', isSelected: false, id: 8, val:8},
          {이름: '1월', isSelected: false, id: 9, val:9},
          {이름: '1월', isSelected: false, id: 10, val:10},
          {이름: '1월', isSelected: false, id: 11, val:11},
          {이름: '1월', isSelected: false, id: 12, val:12},
          {이름: '1월', isSelected: false, id: 13, val:13},
          {이름: '1월', isSelected: false, id: 14, val:14},
          {이름: '1월', isSelected: false, id: 15, val:15},
          {이름: '1월', isSelected: false, id: 16, val:16},
          {이름: '1월', isSelected: false, id: 17, val:17},
          {이름: '1월', isSelected: false, id: 18, val:18},
          {이름: '1월', isSelected: false, id: 19, val:19},
          {이름: '1월', isSelected: false, id: 20, val:20},
          {이름: '1월', isSelected: false, id: 21, val:21},
          {이름: '1월', isSelected: false, id: 22, val:22},
          {이름: '1월', isSelected: false, id: 23, val:23},
          {이름: '1월', isSelected: false, id: 24, val:24},
          {이름: '1월', isSelected: false, id: 25, val:25},
          {이름: '1월', isSelected: false, id: 26, val:26},
          {이름: '1월', isSelected: false, id: 27, val:27},
          {이름: '1월', isSelected: false, id: 28, val:28},
          {이름: '1월', isSelected: false, id: 29, val:29},
          {이름: '1월', isSelected: false, id: 30, val:30},
          {이름: '1월', isSelected: false, id: 31, val:31},

      ],
      2월:[],
      3월:[],
      4월:[],
      5월:[],
      6월:[],
      칠월:[],
      팔월:[],
      구월:[],
      십월:[],
      십일월:[],
      12월:[],
     

    }
  },

isSelected == true CSS를 사용하는 방법

. addedToTrip{
    배경색: #2E9CFE;
    테두리 상단: .5px 단색 검정색;
    테두리 하단: .5px 단색 검정색;  
}

Answer 1

클래스 이름을 지정할 때는 작은따옴표를 사용해야 합니다

으아악