DOM not updating after AJAX data update in VueJS

Question

I'm using Vue.js to modify my DOM. I'm triggering the fetch_data() method which trying to update data.messages to read 'Love the Vue.JS' after the successful completion of the AJAX call.

The AJAX call is working successfully and it does indeed update data.message in this line:

self.message = 'Love the Vue.JS'

I can see it works because it prints in the console. The problem is that the DOM is not updating with the new definition of data.message. How do I get this to work and update the DOM when the data is updated?

var app = new Vue({
  delimiters: ['[[', ']]'],
  el: '#app',
  data: { message: 'Hello Vue.js!' },
  methods: {
    fetch_data: function() {
      console.log('Running script for ajax...');
      $("#retrieve_data_wait").text("Retrieving data. This will update when complete...");

      $.ajax({
        url: '/test_json',
        dataType: 'json',
        timeout: 60000,
        success: function(data) {
          $("#retrieve_data_wait").text(data.test);
          self.message = 'Love the Vue.JS';
          console.log('SUCCESS')
          console.log(self.message);
        },
        error: function(data) {
          $("#retrieve_data_wait").text("Fail");
        }
        // error: function(jqXHR, status, errorThrown) {
        //   //the status returned will be "timeout" 
        //     alert('Got an error (or reached time out) for data generation.  Please refresh page and try again.  If you see this more than once, please contact your customer success agent.');
        // }
      });
    }
  }
})

<div id="app">
  <span id="retrieve_data_wait"></span>
</div>

may the data you are receiving in the sucess callback function has undefined value for test property. Try to debug this response function code and see the value for data variable. This might be the case because .text() method is updating before your ajax it means its getting some undefined data. — Abhishek Kumar
– Abhishek Kumar, Commented May 29, 2018 at 17:19
@ErtySeidohl it couldn't get it to change the with this.message but self.message worked which I could see after printing the self.message in the console. That said, the DOM did not reflect the change to the underlying data. — user3308477
– user3308477, Commented May 29, 2018 at 17:20
@AbhishekKumar for data.test in the ajax call, I'm seeing that it is defined and the data is printing in the template for element with id #retrieve_data_wait as expected. — user3308477
– user3308477, Commented May 29, 2018 at 17:25

Nathan Strutz · Accepted Answer · 2018-05-29 17:25:52Z

8

The problem is that your this context gets lost when you call out to jQuery. The callback method you have (success: function) doesn't have a reference back to Vue. The way to pass the correct context is, conveniently enough, the context property in your $.ajax call.

It's all documented at the jQuery site: https://api.jquery.com/jQuery.ajax/ - just search for the word "context" and you'll find it.

Your improved ajax call should look something like this:

$.ajax({
  url: '/test_json',
  context: this,
//  [... etc ...]
  success: function(data) {
    this.message = "reference to Vue data message";
  }
);

answered May 29, 2018 at 17:25

Nathan Strutz

8,1331 gold badge41 silver badges51 bronze badges

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

1 Comment

user3308477 Over a year ago

This worked perfectly. I added the "context: this" property and then I adjustment my references to include "this.message" and replaced the "self.message" . Thanks Nathan.

MauricioTL · Accepted Answer · 2022-11-17 21:22:04Z

-1

You can just bind the ajax call to the parent component Vue, by adding bind(this) at the end of the ajax success sentence. It would look like the following (I have updated, I realized I had a flaw, now it should work):

    $.ajax({
       url: '/test_json',
       // etc.
       //... etc.
       success: function(data) {
         this.message = "reference to Vue data message";
       }bind(this),
    );

edited Nov 17, 2022 at 21:22

answered Jun 17, 2022 at 23:15

MauricioTL

4431 gold badge7 silver badges18 bronze badges

Collectives™ on Stack Overflow

DOM not updating after AJAX data update in VueJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related