javascript - 用Vue调用同一个组件的方法

Question

我有一个带有 2 个方法的 vue 组件，deleteActivitat 调用 axios.get 方法，然后调用另一个 vue 方法reloadActivitat:

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

您需要将用法更改为函数，而不是使用箭头函数

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 必须绑定(bind)到 vue 实例，this.functionName() 才能工作。

您还可以使用 deleteActivitat() 语法，如 here 中所述。 .