在項目開發(fā)時碰到了一個問題，就是在v-for結(jié)構(gòu)里使用樣式綁定，綁定的值取決于在created或者mounted里面更新的數(shù)據(jù)的值，但完全不起作用，而自己仿照結(jié)構(gòu)寫的測試又可以，確認(rèn)了不是樣式方面的問題。
測試案例如下：
<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>
后面一檢查發(fā)現(xiàn)update根本沒被觸發(fā)，即使我使用了this.$set()和數(shù)組的splice方法。
最終解決方案：使用強制更新this.$forceUpdate() 成功解決，看網(wǎng)上說出現(xiàn)這種情況的原因，是數(shù)據(jù)的層級太深。
