<p>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</p> <p>Semoga seseorang boleh memberitahu saya apa yang saya hilang dalam kod di bawah, terima kasih :)</p> <pre class="brush:php;toolbar:false;"><ul class="dayslist"> <li v-for="hari dalam bulan Januari"v-bind:class="{addedToTrip: day.isSelected}" "day.id"> {{day.val}} </li> </ul></pre> <p>Data vue saya</p> <pre class="brush:php;toolbar:false;">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:[], } },</pre> <p>应用于 isSelected == true 时的 css 类</p> <pre class="brush:php;toolbar:false;">.addedToTrip{ warna latar belakang: #2E9CFE; atas sempadan: .5px hitam pejal; sempadan-bawah: .5px hitam pejal; }</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>