Call to function in Vue watcher produces "is not a function" error

Question

I'm trying to call a function in a Vue component when a prop is changed using a watcher:

props: [
  'mediaUrl'
],

watch: {
  mediaUrl: function() {
    this.attemptToLoadImage();
  }
},

medthods: {
  attemptToLoadImage: function() {
    console.log('Attempting to load');  
  }
},

However, whenever the watcher is triggered (and it is being triggered, as doing a console.log produces a result), I'm getting the following error:

[Vue warn]: Error in callback for watcher "mediaUrl": "TypeError: this.attemptToLoadImage is not a function"

I can't understand why I'm getting this error, as my code seems to be calling the function in the way demonstrated in the Vue docs: https://v2.vuejs.org/v2/guide/computed.html#Watchers .

I'm using Vue 2.4.2.

Any help would be appreciated.

Answer 1

You misspelled methods as medthods :

methods: {
  attemptToLoadImage: function() {
    console.log('Attempting to load');  
  }
},