Vuejs post returns json data but wont assign to vues data object

Question

Hey guys I am using vuejs and ajax to send formData and return a json response. There's a json response comes though however I cant assign it to the vue data object. Any ideas as to why? Heres my method. I know the function is firing as it hits the other page and returns json data in the console. Message, nameExists, and error wont assign even though all our in the vue data property and is spelled correctly.

addTemplate: function() {
  this.sub = true;
  this.itemName = this.itemName.trim();
  var addTemplateForm = document.getElementById("addTemplateForm");
  var fd = new FormData(addTemplateForm);
  if (this.validItemName == true /* etc...*/) {
    $.ajax({
      url:'addTemplateBackend.php',
      type:'POST',
      dataType: 'json',
      data: fd,
      contentType: false,       // The content type used when sending data to the server.
      cache: false,             // To unable request pages to be cached
      processData:false,        // To send DOMDocument or non processed data file it is set to false
      error: function(data){
        this.message = data.message;
        alert('error');
      },
      success: function(data){
        alert('success');
        this.error = data.error;
        this.message = data.message;
        console.log(data);
        this.nameExists = data.nameExists;
        if(data.success == true){
          $('#successModal').modal('show');
        }
      }
    });
  }
}

the close request is due to off topic because unclear what desired result is. Can you clarify what you would like it to do? I noticed though you have $('#successModal').modal('show'); which looks like jquery code, not vue, You may need to include your template too. — Daniel
– Daniel, Commented Sep 7, 2018 at 18:41
the way to update the vue's data object, you would usually use this.myVar to assign a variable to data:{myVar:null}, however, because you're using a callback function to define success action, it is important to note that the scope gets lost, so you need to either use context:this, .bind(this) or var self = this; inside the main function and then use self.myVar to assign. link with more detail: stackoverflow.com/questions/37521320/… — Daniel
– Daniel, Commented Sep 7, 2018 at 18:44

Decade Moon · Accepted Answer · 2018-09-08 02:02:58Z

1

You need to either bind this:

success: function (data) {
  this.message = data.message;
}.bind(this)

or use ES6 "fat arrow" syntax:

success: data => {
  this.message = data.message;
}

See How does the "this" keyword work?.

answered Sep 8, 2018 at 2:02

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs post returns json data but wont assign to vues data object

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related