Vue.js, Functions inside methods are not found

Question

I have just started Vue.js and now I have a problem with using the functions inside the life cycle methods.

<script>
export default {
  name: 'MapComponent',
  data () {
    return {
      restaurants: [],
      menus: []
    }
  },
  mounted: () => {
    this.augmented(2)
  },
  methods: {
    augmented: function (variable) {
      return (2 * variable)
    }
  }
}
</script>

My code looks like above. The problem is that when I call function augmented I get an error which is "Error in mounted hook: "TypeError: _this.augmented is not a function"

Could someone explain that why function augmented is not found?

Thank you for your help.

score 3 · Accepted Answer · answered Oct 08 '18 at 22:23

3

Don't use arrow functions here, because arrow functions assign a different context to "this" keyword in Vue.

mounted: function() { this.augmented(2) };

answered Oct 08 '18 at 22:23

knizhnikov

299
1
7

Thank you that solved my problem. – Jamel Oct 08 '18 at 22:26
2 hours wasted... I had a function that calls another Vue func inside methods{}. – Stanimir Dimitrov Mar 12 '21 at 10:22

Vue.js, Functions inside methods are not found

1 Answers1