我循环遍历4个对象并渲染它们的图像，同时根据属性的真实性应用类，但有时DOM不会重新渲染

Question

我循环遍历4个对象并渲染它们的图像，同时根据属性的真实性应用类，但有时DOM不会使用正确的类更新/重新渲染，即使对象的属性值从true变为false或从false变为true，我也不知道为什么会发生这种情况。

让我来解释一下到底发生了什么。我用card-image类渲染了4个图像，活动图像得到了一个额外的active类。我为每个图像绑定了一个单击函数，这样当用户单击该图像时，该图像将变为活动图像，而前一个活动图像将变为非活动图像。这在一定程度上是有效的，但是，如果我按特定的顺序单击图像，DOM就会停止在正确的图像上呈现正确的类。例如：

默认情况下，图1处于活动状态。如果我单击图3，图3将获得活动类。然后，如果我再次单击图像1，则图像3将丢失活动标记，而图像1将接收活动类

然而，在下面的场景中，出现了一些问题：

默认情况下，图1处于活动状态。如果我单击图3，图3将获得活动类。然后，如果我单击图像2或图像4，图像3不会丢失其活动类，图像2或4也不会获得活动类，即使控制台显示图像3的属性active已变为false，而图像2/4的属性active已变为true。

我已经包含了一个展示发生了什么的gif：https://gyazo.com/81e1c89fffc6c84d8ffead751a223b01。

<div v-for='card in associatedCards'>
    <div class="card-image" :class='{ active: card.active }' @click='makeCardActive(card)'>
        <img :src='"../assets/cards/" + card.cardCode + ".webp"'>
    </div>
</div>

<script>
    import cards from '../assets/json/set1-en_us.json'

    export default {
        data(){
            return {
                cardCode: this.$route.params.cardCode,
                cards: cards,
                card: null,
                associatedCards: null
            }
        },
        methods: {
            makeCardActive(card){
                this.activeCard.active = false
                card.active = true
                console.log(this.associatedCards)
            }
        },
        computed: {
            activeCard(){
                return this.associatedCards.find((card) => {
                    return card.active == true
                })
            }
        },
        mounted(){
            this.card = this.cards.find((card) => {
                return card.cardCode == this.cardCode
            })

            let associatedCards = this.cards.filter((card) => {
                return this.card.associatedCardRefs.includes(card.cardCode)
            })

            let combinedArray = [{...this.card}, ...associatedCards]

            combinedArray.map((card) => {
                card.active = false
            })

            combinedArray[0].active = true

            this.associatedCards = combinedArray
        }
    }
</script>

Answer 1

我认为代码中有一些延迟，为了安全起见，只需将所有卡设置为false，然后将活动卡设置为true

            makeCardActive(card){
                this.associatedCards = 
                this.associatedCards.map(aC => {
                    aC.active = false; 
                    return aC;
                 });
                this.activeCard.active = false
                card.active = true
                console.log(this.associatedCards)
            }
        },