vue-resource vue resource post data – AJAX requests Vuejs

Rate this post

vue-resource vue resource post data – AJAX requests Vuejs

Include Vuejs Libs

[php]
https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js
[/php]

vue-resourceThe plugin for Vue.js (vue-resource) provides services(GET Method) for making web requests(http url) and handle responses using a simple XMLHttpRequest or JSONP.In this post will show you,vue-resource vue resource post data – AJAX requests Vuejs

Features For vue-resource

In vuejs,Supports the Promise Web API and web URI Templates
In vuejs,Supports interceptors for Get And POST request and response
In vuejs,Supports latest More flexible browser to Like as a Firefox browser, Chrome browser, Safari browser, Operabrowser and IE9+browser
In vuejs,Supports version of Vue 1.0 & Vue 2.0
In vuejs,Compact size About as a 14KB and (5.3KB gzipped)

READ :  C# Sealed Class Tutorial with Examples

Simple Example : Get Method (Syntax)

[php]

// GET Method to /apiURL
this.$http.get(‘/apiURL’).then(response => {

// get Method body data
this.someData = response.body;

}, response => {
// Simple Call to error callback
});
}
[/php]

index.html

[php]

Latest Vue.js Commits

  • {{prodc.commit.message}}
    by {{prodc.commit.author.name}}
    at {{prodc.commit.author.date}}

[/php]

App.js

[php]
var apiURL = ‘https://infinityknow.com/tutorial’;

var Product_list = new Vue({

el: ‘#Product_list’,

data: {
currentBranch: ‘dev’,
Products: []
},

created: function () {
this.fetchData();
},

methods: {
fetchData: function () {
this.$http.get( apiURL, function( data ) {
this.Products = data;
console.log(data);
});

}

}
});

[/php]

Call Get Method Request

[php]
new Vue({
el: ‘#products’,
data: {
debug: true,
products: []
},
methods: {
loadProducts: function() {
this.$http.get(‘api/products.json’, function(data, request){
this.products = data;
});
}
}
});
[/php]

READ :  Angular Form Validation ngMessages

Vuejs Post Method

[php]

new Vue({
el: ‘#roles’,

methods: {

addRole: function () {
if (this.role.name.trim()) {
// this.events.push(this.event);
// this.event = { title: ”, detail: ”, date: ” };
this.$http.post(‘https://infinityknow.com/modelLayerV0.1/ProductLayer/public/api/v1/roles’, this.role)
.success(function (res) {
this.events.push(this.role);
console.log(‘Role added!’);
})
.error(function (err) {
console.log(err);
});
}
}

}

});

[/php]

Example

Leave a Reply

Your email address will not be published.