javascript - DOM not updating after AJAX data update in VueJS - Stack Overflow

admin管理员组

文章数量:1335124

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 pletion 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 plete...");

      $.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>

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 pletion 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 plete...");

      $.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>

• javascript
• ajax
• vue.js

Share Improve this question Follow edited May 30, 2018 at 15:21 Emile Bergeron 17.4k55 gold badges8585 silver badges131131 bronze badges asked May 29, 2018 at 17:13 user3308477user3308477 6522 silver badges1010 bronze badges 4

• Do you mean this instead of self? – Erty Seidohl Commented May 29, 2018 at 17:18
• 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 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 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 Commented May 29, 2018 at 17:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./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";
  }
);

You can just bind the ajax call to the parent ponent 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),
    );

本文标签： javascriptDOM not updating after AJAX data update in VueJSStack Overflow