Vue modifies the prompt variable when uploading pictures

< H2 > demand < / H2 >

when uploading multiple images, vue uses the @ change method to display the load prompt when getting the picture list, and hide the load prompt after the picture is uploaded successfully

< H2 > question < / H2 >

the change method is being called now. The code logic is:

  • trigger the change method
  • change the variable to true display prompt
  • call the picture upload API
  • first change the variable to false Hidden prompt
  • change method execution completed

I have followed the above steps, but the load prompt has not been displayed during execution. Debugger can see that the variable has changed, but the variable has not changed on the vue debugging tool. For some reason,
feels that when the whole change method associates the data data of vue, it will only get the value of the final variable executed by the change method. As for how the variable is modified and changed in the process, it will not be related at all. Why

< H2 > Code < / H2 >

<input type="file" accept="image/*"  multiple @change="chooseImage($event,"addReach")">


chooseImage(e, name){
       that.showLoading = true;   //
      for (var i = 0; i < _Files.length; iPP) {
        var reader = new FileReader();
        reader.readAsDataURL(_Files[i]);
        reader.onload = function(e) {
          that.__obj.temp.push(e.target.result);
        };
        var flag = false; 
        flag = i == _Files.length - 1 ? true : false;
        that.uploadFile(flag);
      }
}

uploadFile(flag){
      $.ajax({
        url: "",
        data: request,
        type: "POST",
        success: function(res) {
          if (flag) that.showLoading = false;  //
        }
      });
}

the code is incomplete

Aug.20,2021

should be because you do not define your variables in data . Vue cannot listen for changes

.
Menu