vue v-for循環內的數據按鈕點擊增減className

<template>
    <div>
        <ul>
            <li v-for="(item, index) in cureList" :key="item.id">
                <div class="special-cure" @click="toggleActive(index)" :class="{ active: item.isActive }">
                    <i class="icon-cure"></i><span>已治癒</span>
                </div>
            </li>
        </ul>
    </div>
</template>
export default {
    data() {
        return {
            cureList: [
                {
                    id: 1,
                    isActive: false
                },
                {
                    id: 2,
                    isActive: false
                },
                {
                    id: 3,
                    isActive: false
                }
            ]
        };
    },
    computed: {},
    watch: {},
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    created() {},
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    mounted() {},
    methods: {
        // 治癒
        toggleActive(index) {
            this.cureList[index].isActive = !this.cureList[index].isActive;
        }
    }
};
</script>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章