ajax回调函数无法访问vuejs中的变量

Question

我对 ajax 回调函数有一些问题。我一起使用 ajax 和 vuejs，在 vue 方法中发出 ajax 请求后，我想访问 vuejs 的变量，但它不起作用。这是我的代码

这是我的 vuejs 函数：在这个函数中，我尝试使用 ajax 将图像上传到服务器

submitFile() {
			let url = base_url+"/acp/attach/upload";
			let formData = new FormData();
			let mod_name = $("#vinpModName").val();
			let mod_id = $("#vinpModId").val();
			let file_title = $("#file_title").val();

			//handle multi files upload
			for( var i = 0; i < this.files.length; i++ ){
				let file = this.files[i];
				var imgData = '';

				if ( i > 0 ) file_title = file_title + ' ' + i;

				formData.append('images', file);
				formData.append('mod_name', mod_name);
				formData.append('mod_id', mod_id);
				formData.append('title', file_title);

				$.ajax({
					url: url,
					data: formData,
					contentType: false,
					processData: false,
					enctype: 'multipart/form-data',
					type: "POST",
					success: function (data) {
						var response = jQuery.parseJSON(data); console.log(this.myUploadData);
						imgData = response.imgData;

						if ( response.code == 1 ) {
							SwalAlert.fire({
								icon: 'error',
								title: response.text,
							})
						} else {
							SwalAlert.fire({
								icon: 'success',
								title: response.text,
							})
						}

					},
					error: function (jqXHR, textStatus, errorThrow) { //console.log(errorThrow);
						SwalAlert.fire({
							icon: 'error',
							title: 'Có lỗi xảy ra khi upload! Vui lòng thử lại sau',
						})
					}
				})
				console.log(this.myUploadData);
				//this.myUploadData.push(imgData);

			}


		},

在函数中我记录了 vuejs 变量 2 次，1 次有效，1 次无效

enter image description here

这里是我在浏览器中测试的结果

enter image description here

谁能告诉我我的脚本有什么问题？ 我想访问 this.myUploadData 并将返回对象推送到这个变量 谁能帮我解决这个问题！

Answer 1

我已经包含了一个 Vue 应用程序的 sn-p，其格式与您的相同，它使用不同的 api 并将响应添加到数组中，然后显示在页面上。希望它对您的理解有所帮助。

它在成功回调中使用箭头函数，因此您可以使用this。

在 Vue 实例数据中定义 myUploadData，使其具有响应性。

只有在请求完成后才会推送到 myUploadData，在 success 回调中（感谢 @Renaud）。

new Vue({
  el: "#app",
  data: () => {
    return {
      myUploadData: []
    }
  },
  methods: {
    submitFile() {
      $.ajax({
        url: `https://us-central1-dadsofunny.cloudfunctions.net/DadJokes/random/jokes/1`,
        headers: {
          Accept: "application/json"
        },
        success: data => {
          //Request has finished
          this.myUploadData.push(data);
        },
        error: data => {
          alert(data);
        }
      });

      //Request hasn't finished yet
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <button type="button" @click="submitFile">Submit File</button>

  </div>

  <div v-for="uploadData in myUploadData">
    {{uploadData}}
  </div>
</div>

Answer 2

您还需要在成功回调中执行此操作。 当您的第二个 console.log 被评估时，异步请求根本没有完成。