Home » vue » Using a prop of 'type: Function' changes the scope of 'this' in unrelated VueJS Watcher

Using a prop of 'type: Function' changes the scope of 'this' in unrelated VueJS Watcher

Posted by: admin November 26, 2021 Leave a comment

Questions:

a little new to Vue and currently using Vue 2.5.17 and Typescript 3.7.2.

I’ve run into a strange issue within my single file component where the declaration of a Function type prop changes the scope of this in a seemingly unrelated Watcher.

This is the working code before I make any change. At this point, if I hover over this keyword in the handler, VSCode tells me that it refers to the VueInstance (with all the properties, data, methods I created as well), as expected.

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
        }
      }
    }
  }

I want to create a callback prop function to pass some data to the parent component. When I add this prop (right under myArrList declaration):

onShow: {
  type: Function,
  required: true
}

even without actual usage of the prop, the entire handler breaks. Every reference to this now refers to String | WatchOptionsWithHandler<any> and I get an error saying Property x does not exist on type string.

Why does this happen, and what can I do to fix it? The strange thing is that if I change function to Array or anything else, it works, with the correct this reference. Function however seems to break it completely even if it’s just a declaration.

Answers:

I don’t know why it’s happened but if you want to pass some data to the parent component
the right thing to do is to use custom-events when you want to update the parent
and in the parent component you set the event handler
see more here