How to convert JQuery AJAX function to vue.js

Question

I have the following AJAX function written in jQuery (just make AJAX call to get outcome for div A and div B - the example is simplified)

JavaScript

$(document).ready(function(){
    $( "#c" ).on( "click", function() {
        jQuery.ajax({
            type: "POST",
            url: "post.php",
            data: "",
            dataType:"JSON",
            success: function(data){
                if (data.status == 1){
                    $("#a").html(data.a);
                    $("#b").html(data.b);
                }
            }
        })
    })
})

HTML

<div id="a"></div>
<div id="b"></div>
<button id="c">Start</button>

I understand how to make the HTML template for vue.js and how to set JavaScript variables, but how do I to set AJAX request for vue.js?

Thank you.

Belmin Bedak · Accepted Answer · 2017-02-10 23:50:04Z

2

Well, first thing first, you have to get rid of DOM Targeting with jQuery.In VueJS, there are no direct DOM manipulation. Next, you have to stop thinking jQuery way - Vue and jQuery are 2 totally different things which have different design pattern.

About your problem:

First you have to attach event listener on DOM Element

<button id="c" @click="ajaxMethod">Start</div>

Then into your Vue instance, you want to define that method, but before you make it, make sure you have jQuery installed

new Vue({
  el: '#app',
  data: {
   msg: 'hi';
  },
  methods: {
   ajaxMethod() {
    jQuery.ajax({
      // bla bla bla...
    })
   }
  }
})

But at the end, I won't to suggest you use jQuery here - there are much better libs such as Vue Resource and Axios.

answered Feb 10, 2017 at 23:50

Belmin Bedak

9,2213 gold badges43 silver badges44 bronze badges

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

1 Comment

iraklisg Over a year ago

+1 for pointing the difference between the data centric logic of Vue and the DOM manipulating approach of JQuery

gurghet · Accepted Answer · 2017-02-10 23:47:32Z

1

The suggested way is to use the axios library.

<div id="app">  
  <div>{{a}}</div>
  <div>{{b}}</div>
  <button @click="retrieveData">Start</button>
</div>

Where the Vue instance is

import axios from 'axios'
new Vue({
  el: '#app',
  data: {
    a: '',
    b: ''
  },
  methods: {
    retrieveData() {
      axios.post('post.php', {}, )
       .then(resp => {
         this.a = resp.data.a
         this.b = resp.data.b
       })
    }
  }
})

answered Feb 10, 2017 at 23:47

gurghet

7,6865 gold badges40 silver badges66 bronze badges

9 Comments

Phoca Over a year ago

Hi, thank you very much for the answer, is the Axios library a part of vue.js or must be loaded separately?

Phoca Over a year ago

Testing now, I get the following error: SyntaxError: import declarations may only appear at top level of a module

gurghet Over a year ago

Make the import declaration appear at the top of the file

Robo Robok Over a year ago

How is different from using jQuery inside retrieveData method?

gurghet Over a year ago

It depend on the environment you are using import it the same way you imported jquery

|

Collectives™ on Stack Overflow

How to convert JQuery AJAX function to vue.js

2 Answers 2

1 Comment

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related