【vue.js】watchでdeep: trueを使うとoldValueとnewValueが同じになってしまうという罠
Vue.js
読み込み中です
Vue.jsのwatchでdeep: trueを使うとoldValueとnewValueが同じになってしまい、どの値が更新されたか分からない状態になってしまう。
<script>
let app = new Vue({
data: {
sample: {
1: null,
2: null,
3: null,
4: null
}
},
watch: {
sample: {
deep: true,
handler(newValue, oldValue) {
console.log(newValue)
console.log(oldValue)
}
}
}
})
</script>computedで非参照のコピーを作って、そのcomputedをwatchすることで解決できる
<script>
let app = new Vue({
data: {
sample: {
1: null,
2: null,
3: null,
4: null
}
},
computed: {
computedSample () {
// 非参照のコピーを作る
return JSON.parse(