为什么显示仅在单击的第一个正方形上更新？

Question

我正在Vue中重新构建最初是纯Javascript的应用程序。基本知识的字段为（3或6）个正方形，它们是根据（r，g，b）提示选择正确颜色的随机颜色。

我正在创建我的正方形，并向它们添加@click侦听器，如下所示：

<div class="gameSpace">
    <div
        v-for='(color, ndx) in colors'
        :style='{backgroundColor: color}'
        class="gameSquare"
        @click='checkColor($event, ndx)'>
    </div>
</div>

checkColor功能的设置如下：

checkColor: function(event, ndx) {
    if (event.target.style.backgroundColor === this.goal) {...}
    } else {
        this.message = 'Try Again!';
        this.colors[ndx] = "rgb(52,58,64)";
    }
}

[在浏览器中运行游戏时，单击第一个错误的方块将更改背景颜色，并从游戏字段中“隐藏”。但是，随后的所有错误选择都将确实改变阵列中的颜色（已通过多个console.log()验证），但将not在显示中更新。

鉴于每个错误的选择的确会更新Vue数据（再次通过console.log()验证），我希望显示屏更新所有错误的选择的正方形的颜色，而不仅仅是第一个。

无论第一个错误选择是什么，行为都是相同的。

或者，如果有更好的方法来获得此功能，我将不胜感激：D。在这种情况下，我玩过v-show，但由于隐藏了错误的猜测，它导致方块移动。

Answer 1

我不知道我是否只是没有刷新或发生了其他事情，但是我对代码的另一部分进行了少量编辑，它开始按预期方式工作。