Javascript 绑定到对象的Vue.js类在对象更新时未更改

我有许多按钮，是通过v-for指令生成的。它们都有基于对象字符串的初始类。我有一个事件，在单击按钮时更改此字符串。但是这个类没有被更新。我做错了什么

<template>
    <v-layout>
        <v-btn v-for="cell in cells" :key='cell.id' v-bind:class='cell.color' 
            v-on:click='click(cell.id)'>
            <p v-if="cell.win">win</p>
            <p>{{cell.id}}</p>
        </v-btn>
    </v-layout>
</template>

<script>

export default {
    data: () => {
        return {
            cells: {

            },
            winId: 0,
        }
    },
    methods: {
        generateCells() {
            this.winId = Math.floor(Math.random() * 100);
            for (var i = 0; i < 100; i++) {
                this.cells[i] = {
                    id: i,
                    color: 'info'
                }
            }
        },
        click(id) {
            if (this.cells[id] == this.winId) {
                alert('you win');
                this.cells[id].color = 'success';
            } else {
                this.cells[id].color = 'warning';
            }
        }
    },
    created() {
        this.generateCells();
    }
}

</script>

win
{{cell.id}

导出默认值{
数据：（）=>{
返回{
单元格：{
},
winId:0，
}
},
方法：{
生成细胞（）{
this.winId=Math.floor（Math.random（）*100）；
对于（变量i=0；i<100；i++）{
此.cells[i]={
id:我，
颜色：“信息”
}
}
},
单击（id）{
if（this.cells[id]==this.winId）{
警惕（“你赢了”）；
this.cells[id].color='success'；
}否则{
this.cells[id].color='warning'；
}
}
},
创建（）{
这是generateCells（）；
}
}

我希望button类在对象更新时更新。object.color属性已更新，但类仍保持初始状态

由于现代JavaScript的限制（以及Object.observe的放弃），Vue无法检测属性的添加或删除。由于Vue在实例初始化期间执行getter/setter转换过程，因此数据对象中必须存在一个属性，以便Vue对其进行转换并使其响应

请在此处阅读更多：

Vue提供了一个API，用于向嵌套级别对象添加属性并使其成为反应性对象

为此，您可以使用

Vue.set(object, propertyName, value);

您还可以使用

vm.$set

方法

this.$set(this.someObject, 'b', 2);

因此，在代码中，设置需要执行的数组值

this.$set(this.cells, i, {
                           id: i,
                           color: 'info'
                         });

请参阅下面的完整代码段：

window.onload=（）=>{
新Vue({
el:“#应用程序”，
数据：（）=>{
返回{
单元格：{
},
winId:0，
}
},
方法：{
生成细胞（）{
this.winId=Math.floor（Math.random（）*100）；
对于（变量i=0；i<100；i++）{
this.$set（this.cells，i{
id:我，
颜色：“信息”
})
}
},
单击（id）{
if（this.cells[id]==this.winId）{
警惕（“你赢了”）；
this.cells[id].color='success'；
}否则{
this.cells[id].color='warning'；
}
}
},
创建（）{
这是generateCells（）；
}
})
}

正文{
填充：1rem；
}
.info{
颜色：蓝色；
}
.警告{
颜色：红色；
}
.成功{
颜色：绿色；
}

win
{{cell.id}

详细阅读中的数据和方法

应该注意的是，数据中的属性只有在 创建实例时已存在。这意味着如果你添加一个新的 财产，如：

vm.b = 'hi'

然后对b的更改将不会触发任何视图更新

在循环中设置prop值时，可以使用

Vue.set（）

或

this.$set（）

api

或替换整个对象，如：

var cells = {}
for (var i = 0; i < 100; i++) {
    cells[i] = {
    id: i,
    color: 'info'
    }
}
this.cells = cells

var newCell = {}
if (this.cells[id] == this.winId) {
    alert('you win');
    newCell[id] = {id:id,color:'success'}
} else {
    newCell[id] = {id:id,color:'warning'}
}
this.cells = Object.assign({},this.cells,newCell)