Vue 2.0 and ajax calls


#1

With vue-resource not being compatible with Vue 2.0, just wondering what people are using instead for now?


#2

I for example use xhr or fetch pollyfill, some people use axios. But you’re certainly not limited to choose whatever you like :wink: Just don’t use jQuery to do only Ajax because library is bigger than Vue :slight_smile:


#3

Cool thanks!


#4

is there any official announcement regarding vue-resource not supporting Vue 2.0?

Currently i’m running Vue 2.0 rc5 with vue-resource 1.0.3 and it works fine


#5

Where did you get that from? It’s working with Vue 1.0 and 2.0 …


#6

It is not working for me. Its sending everything over as method: “OPTIONS” and the global http config in the Vue instance is not working. I’m using the latest beta of Vue 2.0.0-rc.8


#7

I can assure you that this has nothing do to with Vue 2.0.

You are either using an outdated version of vue-resource, or an outdated tutorial for the latest version.

Vue-resource 1.0 came with significant API changes, which lead many people into e troubles like yours.

Edit: or you have to activate the emulate-json mode, see the docs for this.


#8

My personal favorite is fetchival with some polyfills (added on the readme). The syntax is really nice, it’s supporting a future standard and the lib is 0.5kb min/gz


#9

Keep in mind vue-resource is not an official plugin


#10

vue-resource works fine with vue 2.0. we are using it without any problem.


#11

I’ve also used vue-resource with Vue 1 and 2. Could we see some code examples?


#12

Since I wrote this i am using something else for ajax. Since everyone says it works maybe i’ll go back and try again. It was probably an error on my part. Thanks for all the info.


#13

Does anyone have an example?

I am starting to learn Vue and this is one of the first things I need to do.

Just reading this:
https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4#.6gn2zeoex

Mick


#14

Just used Axios (https://github.com/mzabriskie/axios) for a recent project instead of Vue-resource.

No issues. Worked fine. Implementation examples are on the GitHub page.


#15

For vue-resource and older server backends, here is a simple example.

first, set

Vue.http.options.emulateHTTP = true; // old web only

then use something like this in the methods section:

loadALCCCData: function () {   
             this.fetching = true;     // triggers loading icon ...       
              var myPostData = {  startDate: this.entryStartDate,endDate:this.entryEndDate };
              this.$http.post('myPagethatReturnsJSON.whatever',myPostData).then(
                function (response) { 
                  this.eAry = response.body;  // assign the return JSON to your variable
                  this.fetching = false; // hide icon
               },
              function (response) { this.fetching = false; // hide icon
                console.log('error getting data from server'); // or do some other error handling
              });
            }

#16

Since I write this, I am using something else for Ajax. Because everyone says it, maybe I’ll go back and try again. It was probably an error on my part. Thanks for all the information.


#17

I guess axios is better .


#18

Hi All,

If you are looking for simple solution, here is the code:

JS Includes

add AXIOS lib or use following CDN:

https://unpkg.com/axios/dist/axios.min.js

Script section

    var vm = new Vue({
        el: '#app',
        data: {                
            products: []
        },
        mounted() {
            this.get();
        },
        methods: {
            get: function () {                    
                axios.get('../Data/Products.txt')
                    .then(response => {
                    this.products = response.data;
                    console.log(this.products);
                });
            }
        }
    })

#19

how can I do json-rpc instead of RESTful calls in vue.js? axios seems only support REST calls.


#20

This has nothing to do with Vue, really - just like axios is a separate library and just one of many ajax libs.

So any lib that does json-rpc would be fine.