Call methods of the same component with Vue

Question

I have a vue component with 2 methods, deleteActivitat calls an axios.get method and then, this calls the other vue method reloadActivitats:

methods: {
  reloadActivitats: function () {
    this.$store.dispatch(actionTypes.FETCH_ACTIVITATS)
  },
  deleteActivitat: (activitat) => {
    crud.delete(activitat).then((response) => {
      this.reloadActivitats() // calls reloadActivitats method
    }).catch((error) => {
      console.log(error);
    });
  }
}

But when I run the application the reloadActivitats method is not executed and the console shows the next error:

TypeError: _this.reloadActivitats is not a function

Image with the vue error

Any idea of what I'm doing wrong?

Agney · Accepted Answer · 2018-02-12 09:08:49Z

1

Instead of using an arrow function, you need to change the usage to a function

deleteActivitat: function(activitat) {
  crud.delete(activitat).then((response) => {
    this.reloadActivitats() // calls reloadActivitats method
  }).catch((error) => {
    console.log(error);
  });
}

This is because arrow functions do not bind the value of this. this has to be bound to the vue instance for this.functionName() to work.

You can also use deleteActivitat() syntax as described here.

edited Feb 12, 2018 at 9:08

answered Feb 12, 2018 at 9:03

Agney

19.3k7 gold badges60 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rentonie · Accepted Answer · 2018-02-12 09:10:51Z

0

Don't use arrow function for the deleteActivitat.

The arrow function is bound to the parent context, and not the Vue instance.

Try

deleteActivitat: function (activitat) {

demo: https://codesandbox.io/s/vnm40qkzz5?expanddevtools=1&module=%2FApp.vue (Open the console)

answered Feb 12, 2018 at 9:10

Rentonie

4772 gold badges10 silver badges25 bronze badges

Comments

tolotra · Accepted Answer · 2018-02-12 09:23:39Z

0

Avoid to use arrow functions in methods object member.

deleteActivitat (activitat) {
    crud.delete(activitat).then((response) => {
      this.reloadActivitats() // calls reloadActivitats method
    }).catch((error) => {
      console.log(error);
    });
  }

answered Feb 12, 2018 at 9:23

tolotra

3,2701 gold badge13 silver badges19 bronze badges

Collectives™ on Stack Overflow

Call methods of the same component with Vue

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related