javascript - Apabila menggunakan vue, saya ingin memilih beberapa item dalam senarai dan menambah kelas

Question

Saya mahu memilih penerima kumpulan daripada senarai dan memulakan sembang kumpulan

Saya menggunakan vue2.0 Saya menukar medan isActive dalam objek pengguna untuk memilih keadaan Jika isActive adalah benar, kemudian tandakannya dan tambahkan idnya pada tatasusunan, kemudian Padam dia

Masalah yang sedang kami hadapi ialah hanya satu yang boleh dipilih, tetapi ID telah ditambah dan juga boleh dipadamkan. Tetapi tiada kesan semak.

HTML：

    <p class="crumb" v-for="item in localData">
        <p class="list-header">{{item.item}}</p>
        <p class="item-list" v-for="(user, index) in item.list" @click="patientCalendar(user, $event)">
            <p class="item">
                <p class="group" v-bind:class="{'show': isActiveGroup}">
                    <span class="mint-checkbox-core " v-bind:class="{'checked': user.isActive}"></span>
                </p>
                <img :src="user.headImg" alt="">
                <span class="username">{{user.name}}</span>
            </p>
        </p>
    </p>

JS：
patientCalendar(user, event) {
    if (!user.isActive) {
      user.isActive = true
      this.selectedUsers.push(user.patientUserGid)
    } else {
      user.isActive = false
      this.selectedUsers.splice(user.patientUserGid, 1)
    }
},

Ini ialah kesan interaksi UI, anda hanya boleh memilih satu

Answer 1

Kod terlalu kecil untuk dinilai, sila pastikan data responsif.

Semak sama ada cara untuk menambah elemen pada tatasusunan localData dan item adalah betul localData 和 item 数组增加元素的方式是否正确；

item 数组里的对象(user)的初始状态有给 isActive

item Keadaan awal objek (pengguna) dalam tatasusunan mempunyai nilai awal isActive Jika tidak, Vue tidak dapat mengesan penambahan atribut. 🎜

Answer 2

Jika anda menggunakan Google Chrome, disyorkan untuk menambah sambungan Vue.js devtools dan kemudian buka konsol Selepas anda mengkliknya dan melihat status data anda, anda sepatutnya dapat mencari masalah.