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)
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
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]
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]