The content of the two-dimensional array in vue changes, the watch method and refresh view will not be triggered
Adding deep to watch can't solve it
method one
Remount, although the view will be refreshed but the watch method will not be triggered
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./vue.js" charset="utf-8"></script>
</head>
<body>
<div id='app'>
{{arr}}
<button @click="change">改变</button>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
arr: [
['0', '0'],
['0', '0']
]
},
watch: {
arr: {
// deep: true,
handler: function(newVal, oldVal) {
console.log(arguments)
}
}
},
methods: {
change: function() {
this.arr[0][0] = '1'
// 重新挂载实例，实现数据刷新
this.$mount("#app")
}
}
})
</script>
</body>
</html>
Method Two:
Use vue's set method
this.$set(this.arr[0], '0', 1)
This method will trigger the watch event and also update the view