ajax call back function can not access the variable in vuejs

Question

i have some problem with ajax call back function. I use ajax and vuejs together, after a make an ajax request in vue method, i would like to access the variable of vuejs but it not working. Here is my code

This is my vuejs function: in this function i tried to upload image to server with 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);

			}


		},

in the function i log the vuejs variable 2 time, 1 worked and 1 does not work

enter image description here

here, the result when i tested in browser

enter image description here

Can anyone tell me what's wrong with my script? i want to access to the this.myUploadData and push the return object to this variable Can any one help me with this!

Does this answer your question? Access Vue Instance Using this — Shoejep
– Shoejep, Commented May 17, 2020 at 8:08
Can you explain what's not working? You've changed success: function (data) { to success: data => { and moved this.myUploadData.push(imgData); into the success callback and it's still not working? — Shoejep
– Shoejep, Commented May 18, 2020 at 8:14
yes, that's right, the error log tell me that this.myUploadData is not defined — Tuan Tran
– Tuan Tran, Commented May 18, 2020 at 8:40
Have you defined myUploadData in the Vue instance data? Could you update your question to show? — Shoejep
– Shoejep, Commented May 18, 2020 at 9:26

Shoejep · Accepted Answer · 2020-05-18 09:44:08Z

I've included a snippet of a Vue app with the same format as yours, it uses a different api and adds the response to an array, which then displays on the page. Hopefully you'll find it useful in your understanding.

It uses arrow functions in the success callback, so that you can use this.

Defines myUploadData in the Vue instance data, so that it's reactive.

Only pushes to myUploadData once the request has finished, in the success callback (Thanks @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>

Renaud · Accepted Answer · 2020-05-17 08:51:47Z

0

You need to do that within the success callback also. When your second console.log is evaluated the async request has not finished at all.

answered May 17, 2020 at 8:51

Renaud

1,3098 silver badges9 bronze badges

1 Comment

Tuan Tran Over a year ago

i tried to log in the success callback already but it not work too

Collectives™ on Stack Overflow

ajax call back function can not access the variable in vuejs

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related