Vue.js中API成功响应后调用组件方法失败的解决方法

嘿，我瞅了你的代码，问题主要出在this的指向和几个细节处理上，导致test()方法没被正确调用，咱们一步步来解决：

核心问题1：axios回调里的this指向不对 #

你在then里用了普通函数，这时候函数内部的this已经不是Vue实例了，所以this.test()根本找不到这个方法。你其实已经提前把Vue实例存在了vue变量里，那直接用vue.test()就行；或者更推荐用箭头函数，让this继承外层的Vue实例。

核心问题2：id参数引用错误 #

你在axios.post里传的{ id : id }，这里的第二个id是未定义的全局变量吧？你的data里已经声明了id，应该引用Vue实例里的id，也就是vue.id或者箭头函数下的this.id。

小优化：避免依赖全局Vue实例 #

test()里直接用app.details虽然能跑，但用this.details更符合Vue的组件化思想，不用依赖全局的app变量。

修复后的完整代码 #

var app = new Vue({
  el: "#contents",
  data: {
    id: null,
    details: [],
  },
  methods: {
    fetchProductDetails: function(){
      let vue = this;
      axios.post("/api/get-details", { 
        id : vue.id  // 修正：引用Vue实例里的id
      })
      .then(function (response) {
        vue.details = response.data;
        vue.test();  // 修正：用提前保存的vue实例调用test
      })
      .catch(function (error) {});
    },
    test: function () {
      console.log(this.details);  // 优化：用this代替全局app
    }
  },
  mounted: function(){
    this.fetchProductDetails();
  },
});

或者用箭头函数的更简洁写法：

var app = new Vue({
  el: "#contents",
  data: {
    id: null,
    details: [],
  },
  methods: {
    fetchProductDetails: function(){
      axios.post("/api/get-details", { 
        id : this.id  // 箭头函数下this指向Vue实例
      })
      .then((response) => {  // 用箭头函数，this继承外层上下文
        this.details = response.data;
        this.test();  // 直接用this调用test方法
      })
      .catch(function (error) {});
    },
    test: function () {
      console.log(this.details);
    }
  },
  mounted: function(){
    this.fetchProductDetails();
  },
});

这样修改后，test()方法就能在axios获取到响应后正常执行啦，代码也更符合Vue的规范~

内容的提问来源于stack exchange，提问作者sdfgg45