немного нового для Vue и в настоящее время используется Vue 2.5.17 и Typescript 3.7.2.
Я столкнулся со странной проблемой в моем отдельном файловом компоненте, когда объявление функции type prop изменяет область действия this в, казалось бы, не связанном Watcher.
Это рабочий код, прежде чем я сделаю какие-либо изменения. На этом этапе, если я наведу курсор мыши на ключевое слово this в обработчике, VSCode сообщит мне, что оно ссылается на VueInstance (со всеми свойствами, данными и методами, которые я создал), как и ожидалось.
export default Vue.extend({
name: 'myWidget',
props: {
myArrList: {
type: Object,
required: true
}
},
data() {
return {
selectReason: null
};
},
watch: {
myArrList: {
immediate: true,
deep: true,
handler() {
if (Object.keys(this.myArrList).length === 0) {
this.selectReason = null;
} else {
const content = Object.keys(this.myArrList)[0];
this.selectReason = this.myArrList[content][0].Activity); //get first object
}
}
}
}
Я хочу создать функцию обратного вызова для передачи некоторых данных в родительский компонент. Когда я добавляю эту опору (прямо под объявлением myArrList):
onShow: {
type: Function,
required: true
}
даже без фактического использования опоры, весь обработчик ломается. Каждая ссылка на this теперь ссылается на String | WatchOptionsWithHandler<any>, и я получаю сообщение о том, что свойство x не существует в строке типа.
Почему это происходит, и что я могу сделать, чтобы это исправить? Странно то, что если я изменяю функцию на Array или что-то еще, она работает с правильной ссылкой this. Однако функция, кажется, полностью ее нарушает, даже если это просто объявление.