Edited at

Vue.jsのnested dataをwatchする


環境


  • Vue 2.5.17


dataに定義されている連想配列の内部をwatchしたい


ダメな例

new Vue({

el: '#app',
data: {
obj: {
message: ''
},
result: ''
},
watch: {
obj.message: function(val){
this.result = val;
}
}
});

obj.messageはキー名としてアウト。。。

じゃあどうやって監視するのか調べたところ


  • handlerでobj全体を監視する方法

  • 文字リテラルでキー名を指定する方法

があった。


handlerでobj全体を監視する方法

new Vue({

el: '#app1',
data: {
obj: {
message: '',
other: ''
},
result: ''
},
watch: {
obj: {
handler: function(val) {
this.result = val.message;
},
deep: true
}
}
});

この場合はobjの他の要素も監視されるので扱いには注意。


文字リテラルでキー名を指定する方法

new Vue({

el: '#app2',
data: {
obj: {
message: '',
other: ''
},
result: ''
},
watch: {
'obj.message': function(val) {
this.result = val;
}
}
});

この場合はobj.messageのみが監視される。

jsfiddleに上記コードを書いた、結構便利だったので検証などで利用していきたい。。。

https://jsfiddle.net/nakata_kazuhiro/5y1rctap/31/


参考

Vue.js 公式

vue.js 2.x その0009 watchで配列(array)や連想配列(object)を監視する