Utilizing Vue.js to make changes to my DOM, I have implemented the fetch_data() method. This method attempts to update data.messages to display 'Love the Vue.JS' once the AJAX call is successfully completed.
The AJAX call executes successfully and updates data.message with the line:
self.message = 'Love the Vue.JS'Although the console confirms that it works, the issue arises when the DOM does not reflect the new value of data.message. How can I ensure that the DOM gets updated when the data changes?
var app = new Vue({
delimiters: ['[[', ']]'],
el: '#app',
data: { message: 'Hello Vue.js!' },
methods: {
fetch_data: function() {
console.log('Executing ajax operation...');
$("#retrieve_data_wait").text("Fetching data. Update will be displayed when ready...");
$.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>