Tidak dapat membaca sifat ralat yang tidak ditentukan: Jenis pengikatan kelas yang salah untuk harta objek terikat Vue

Question

Saya cuba mengikat kelas berdasarkan sifat objek, tetapi apabila saya mengklik pada objek senarai untuk mencetuskan @click, konsol memberitahu saya bahawa sifat objek isSelected tidak boleh dibaca... I' m cuba melakukan ini pada item senarai yang dipaparkan secara dinamik Gunakan fungsi untuk menerima id item dan mencetuskan kelas untuk diaktifkan apabila sifat ini ditetapkan kepada palsu atau benar

Semoga seseorang boleh memberitahu saya apa yang saya hilang dalam kod di bawah, terima kasih :)

<ul class="dayslist">
  <li v-for="hari dalam bulan Januari"v-bind:class="{addedToTrip: day.isSelected}" "day.id">
      {{day.val}}
  </li>
  </ul>

Data vue saya

data:function(){
    kembali{
      tahun: 2021,
      bulan: 1,
      Hari 1,
      hari:[18,19,20,21],
      Januari:[
          {name: 'Januari', isSelected: false, id: 1, val:1},
          {name: 'Januari', isSelected: false, id: 2, val:2},
          {name: 'Januari', isSelected: false, id: 3, val:3},
          {name: 'Januari', isSelected: false, id: 4, val:4},
          {name: 'Januari', isSelected: false, id: 5, val:5},
          {name: 'Januari', isSelected: false, id: 6, val:6},
          {name: 'Januari', isSelected: false, id: 7, val:7},
          {nama: 'Januari', isSelected: false, id: 8, val:8},
          {name: 'Januari', isSelected: false, id: 9, val:9},
          {name: 'Januari', isSelected: false, id: 10, val:10},
          {name: 'Januari', isSelected: false, id: 11, val:11},
          {name: 'Januari', isSelected: false, id: 12, val:12},
          {name: 'Januari', isSelected: false, id: 13, val:13},
          {name: 'Januari', isSelected: false, id: 14, val:14},
          {nama: 'Januari', isSelected: false, id: 15, val:15},
          {name: 'Januari', isSelected: false, id: 16, val:16},
          {name: 'Januari', isSelected: false, id: 17, val:17},
          {name: 'Januari', isSelected: false, id: 18, val:18},
          {name: 'Januari', isSelected: false, id: 19, val:19},
          {name: 'Januari', isSelected: false, id: 20, val:20},
          {name: 'Januari', isSelected: false, id: 21, val:21},
          {name: 'Januari', isSelected: false, id: 22, val:22},
          {name: 'Januari', isSelected: false, id: 23, val:23},
          {nama: 'Januari', isSelected: false, id: 24, val:24},
          {nama: 'Januari', isSelected: false, id: 25, val:25},
          {name: 'Januari', isSelected: false, id: 26, val:26},
          {name: 'Januari', isSelected: false, id: 27, val:27},
          {name: 'Januari', isSelected: false, id: 28, val:28},
          {nama: 'Januari', isSelected: false, id: 29, val:29},
          {name: 'Januari', isSelected: false, id: 30, val:30},
          {name: 'Januari', isSelected: false, id: 31, val:31},

      ],
      Februari:[],
      Mac:[],
      April:[],
      Mungkin:[],
      Jun:[],
      Julai:[],
      Ogos:[],
      September:[],
      Oktober:[],
      November:[],
      Disember:[],
     

    }
  },

应用于 isSelected == true 时的 css 类

.addedToTrip{
    warna latar belakang: #2E9CFE;
    atas sempadan: .5px hitam pejal;
    sempadan-bawah: .5px hitam pejal;  
}

Answer 1

Apabila menyatakan nama kelas, anda perlu menggunakan petikan tunggal

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>