在项目开发时碰到了一个问题，就是在v-for结构里使用样式绑定，绑定的值取决于在created或者mounted里面更新的数据的值，但完全不起作用，而自己仿照结构写的测试又可以，确认了不是样式方面的问题。
测试案例如下：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.moren {
width: 200px;
height: 200px;
}
.clicked {
background: pink;
}
.noclicked {
background: blue;
}
</style>
</head>
<body>
<!-- :class="[{moren: true}, { isclicked: item.clickFlag }, {noclicked: true}]" -->
<!-- :class="{isclicked: item.clickFlag}" -->
<!-- :class="{isclicked: item.clickFlag}" -->
<!-- :style="item.color" -->
<div id=root>
<div v-for='(item) in newArr'
@click="clickDiv(item)"
class="moren" :class="item.style">
{{item.name}}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#root',
data: {
newArr: []
},
methods: {
clickDiv(item) {
console.log(item.clickFlag);
item.clickFlag = !item.clickFlag? true: false;
item.style = item.clickFlag? 'clicked':'noclicked';
// var newItem = item;
// item.name = 'Ryuko';
// this.newArr.splice(index, 1, newItem);
// // this.clickFlag[index] = !this.clickFlag[index]? true: false;
// console.log(this.newArr);
// this.newArr[index].style = this.newArr[index].clickFlag? 'clicked':'noclicked';
}
},
created() {
this.newArr = [{
name: 'xxx',
clickFlag: false,
style: 'noclicked'
}, {
name: 'yyy',
clickFlag: false,
style: 'noclicked'
}];
}
})
</script>
</body>
</html>
后面一检查发现update根本没被触发，即使我使用了this.$set()和数组的splice方法。
最终解决方案：使用强制更新this.$forceUpdate() 成功解决，看网上说出现这种情况的原因，是数据的层级太深。
