Variable in data section can't get API response value （response.data)-CodePudding

I accessed API to upload image and return the image URL with Vue app. I want to set API response value to imgUrl1 in data section. I' sure getting correct response in console but imgUrl1 is still empty. Anybody idea ?? Thank you so much !

Vue

data () {return 
 {
 imgUrl1:'',→empty
 }
},
methods: {
  uploadFile1: function () {
      var img_file1 = this.$refs.img1.files[0]
      var params = new FormData()
      params.append('image', img_file1)
      params.append('client_name', this.tableSelected)
      axios.post("http://127.0.0.1:5000/", params
      ).then(function (response) {
        console.log(response.data)→image url exists
        this.imgUrl1 = response.data
      }).catch(function (error) {
        for(let key of Object.keys(error)) {
        console.log(key);
        console.log(error[key]);
        }
      });
}

console.log(response.data)

https://storage.googleapis.com/dashboard_chichat/img/クライアント名/xxxxxxxxnQSkX6Wudy.jpg

CodePudding user response：

try using arrow functions in your then callback so the value of this is your Vue component.

methods: {
  uploadFile() {
    ...
    axios.post('', params)
      .then((response) => {
        this.imgUrl1 = response.data
      })
  }
}

the equivalent of it without arrow functions is:

methods: {
  uploadFile() {
    ...

    const _this = this;

    axios.post('', params)
      .then(function (response) {
        _this.imgUrl1 = response.data        
      })
  }
}