'This` là undefined trong vue.js watcher

Question

tôi có thành phần với watcher

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

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

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

Bất cứ khi nào parent thành phần thay đổi propShow thành phần này phải cập nhật nó show tài sản. Thành phần This cũng sửa đổi thuộc tính show, đó là lý do tại sao tôi cần cả hai: show và propShow, vì Vue.js không cho phép thay đổi thuộc tính trực tiếp.

Dòng này

this.show = val; 

gây lỗi

TypeError: Cannot set property 'show' of undefined 

vì this bên handler là undefined.

Tại sao?

Answer 1

Bạn sẽ phải sử dụng cú pháp function đây, như cảnh báo trong các tài liệu here:

Lưu ý rằng bạn không nên sử dụng một chức năng mũi tên để xác định là người quan sát (ví dụ SEARCHQUERY: newValue => this.updateAutocomplete (newValue)). Lý do là các hàm mũi tên liên kết bối cảnh gốc, vì vậy đây sẽ không phải là cá thể Vue như bạn mong đợi và this.updateAutocomplete sẽ không được xác định.

Vì vậy, mã của bạn nên là:

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