`This`在vue.js未定義守望

Question

我有分量與守望

props: { 
    propShow: { required: true, type: Boolean } 
}, 

data() { 
    return { 
     show: this.propShow 
    } 
}, 

watch: { 
    propShow: { 
     handler: (val, oldVal) => { 
      this.show = val; 
     } 
    } 
} 

每當parent成分改變propShow該組件必須更新它的show財產。 This組件也修改show屬性，這就是爲什麼我需要兩個：show和propShow，因爲Vue.js不允許直接更改屬性。

此行

this.show = val; 

導致錯誤

TypeError: Cannot set property 'show' of undefined 

因爲this內部處理程序是undefined。

爲什麼？

Answer 1

你將不得不在這裏使用function語法，在文檔here警告：

注意，你不應該用一個箭頭的功能來定義觀察器（例如SEARCHQUERY：NEWVALUE => this.updateAutocomplete（ NEWVALUE））。原因是箭頭函數會綁定父上下文，所以這不會像您期望的那樣是Vue實例，並且this.updateAutocomplete將是未定義的。

所以，你的代碼應該是：

watch: { 
    propShow: { 
     handler: function(val, oldVal) { 
      this.show = val; 
     } 
    } 
}