Question

我在构造函数中有一个带有变量的类，我尝试发出ajax请求并更新变量。但是变量不在我的范围内。我该怎么办？

import Axios from "axios";

class ajaxTest{
    constructor() {
        this.resultOfAjax=" Mein Test";
    }

    set(id){
        return new Promise(function(resolve, reject) {
            Axios.get('/api/v1/ajax/'+id)  
            .then(function (response) {
                this.resultOfAjax=response.data;
                resolve(200);
                console.log("Test");
            });
        })
    }
}
export default ajaxTest;

我也尝试更新我的loadingCircle变量，但是它不起作用。我认为这是同样的错误。是这样吗？

const app = new Vue({
    el: '#app',
    data: {
      loadingCircle: true,
      ajaxTest: new ajaxTest()
    },
    methods: {
      handleClick: function(id) {
        console.log("Das ist ein Test die ID ist:"+id); 
        this.ajaxTest.set(id).then( function(status){
          console.log("Status "+status);
          this.loadingCircle=false;
        });
      }
    },
    components: {
      examplecomponent
    }
});

Answer 1

如果使用function，则内部的this与外部的this不同。解决方案是改用粗箭头符号。

const app = new Vue({
    el: '#app',
    data: {
      loadingCircle: true,
      ajaxTest: new ajaxTest()
    },
    methods: {
      handleClick: (id) => {
        console.log("Das ist ein Test die ID ist:"+id); 
        this.ajaxTest.set(id).then( (status) => {
          console.log("Status "+status);
          this.loadingCircle=false;
        });
      }
    },
    components: {
      examplecomponent
    }
});

vue2和promise如何更新变量？

1 个答案: