[Vue.js] watch 物件屬性

Watch

使用 watch 是用來監控指定的資料變化時,觸發相對應的行為,要監控一般的參數很簡單,但是要監控物件裡面的屬性呢?以下是解決的方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default {
data() {
return {
form: {
type: 'document'
}
};
},
watch: {
//當 form 裡面的 type 改變時則會觸發
'form.type': function () {
// Do anything ...
this.doSomething();
console.log('change');
}
}
};

在這個程式碼中,我們不能將 'form.type': function () {} 這個函數改成箭頭函數 'form.type' () => {} ,因為箭頭函數會綁定 parent 的內容,這樣會導致 this.doSomething() 這行程式碼出現錯誤。