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()进行了验证），但在显示中将不更新。

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

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

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

Answer 1

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

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

1 个答案: