Vue Answers

How to update data of a Vue.js instance from a jQuery Ajax call?

Spread the love

To update data of a Vue.js instance from a jQuery Ajax call, you can use Vue’s reactivity system to update the data once the Ajax call is successful.

We can follow the following steps:

  1. Make sure we have jQuery included in our project.

If not, we can include it via CDN or install it using npm.

  1. Create a Vue instance and define the data we want to update:
<div id="app">
  <p>Data from AJAX call: {{ ajaxData }}</p>
var app = new Vue({
  el: '#app',
  data: {
    ajaxData: ''
  1. Make an Ajax call using jQuery. Once the data is fetched successfully, update the Vue instance’s data:
  url: 'your/api/endpoint',
  method: 'GET',
  success: function(response) {
    // Update Vue instance's data
    app.ajaxData =;
  error: function(xhr, status, error) {
    // Handle errors

Replace 'your/api/endpoint' with the actual URL of our API endpoint. In the success callback function, should be replaced with the actual data structure returned by our API.

This way, when the Ajax call is successful, Vue’s reactivity system automatically updates the ajaxData property in the Vue instance, and the changes will be reflected in our Vue component’s template.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *