Vuejs Resource

Posted 8 years ago - updated 8 years ago vuejs vue-resource

Using Vue Resource

GET

this.$http.get('/someUrl').then((response) => {
      // success callback
  }, (response) => {
      // error callback
 });

POST

 var data = {};
 data.id = this.id;
 data.url = this.url;
 data.title = this.title;

this.$http.post('/api/v.01/saveitem',data).then((response) => {
    // all good
}, (response) => {
    // bad
})

To send POST data as Form Data

This will set the content-type application/x-www-form-urlencoded

1) Set emulateJson

Vue.http.options.emulateJSON = true;

or

this.$http.post('/api/v.01/saveitem', data, {
 emulateJSON: true
})

or use FormData

var formData = new FormData();
formData.append('id', '123');
this.$http.post('/api/v.01/saveitem', formData)

To send Json native data that is readable in PHO

$json = file_get_contents('php://input');
$obj = json_decode($json);

SHORTCUTS

// global Vue object
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// in a Vue instance
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);