使用Vue

Question

我有一个包含2个方法的vue组件，deleteActivitat调用axios.get方法，然后调用另一个vue方法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);
    });
  }
}

但是当我运行应用程序时，reloadActivitats方法没有执行，控制台显示下一个错误：

TypeError: _this.reloadActivitats is not a function

Image with the vue error

知道我做错了什么？

Answer 1

您需要将使用情况更改为function

，而不是使用箭头功能

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

这是因为箭头函数do not bind the value of this。 this必须绑定到this.functionName()的vue实例才能正常工作。

您还可以使用here所述的deleteActivitat()语法。

Answer 2

请勿对deleteActivitat使用箭头功能。

箭头函数绑定到父上下文，而不是Vue实例。

尝试

deleteActivitat: function (activitat) {

demo：https://codesandbox.io/s/vnm40qkzz5?expanddevtools=1&module=%2FApp.vue（打开控制台）

Answer 3

避免在方法对象成员中使用箭头函数。

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