Vuejs RESTful Web Service Example – Vue RESTful APIs VueResource

Rate this post

Vuejs RESTful Web Service Example – Vue RESTful APIs VueResource

Getting Started With VueJS simple Example – Making API Calls VueResource.
NEW: Get up simple api call and running with single page apps file Vuejs components,and hot-reload all the dara, lint-on-save data and unit all the testing in minutes with using vue-cli!

Vuejs Need making api

  • Vue.js 0.12.15
  • vue-router
  • vue-resource using vuejs
  • vueify
  • envify to simple accomodate builds in types different environments
  • Laravel or core PHP
  • Bootstrap 3.3.5 or latest styling

VueJS with Rest API list rendering Example

index.html

[php]


  • {{ (item.name ? item.name : ‘noname’) | json | capitalize}}


    {{ (item.computer ? item.computer : ‘nocomputer’) | json | capitalize}}

[/php]

index.js

[php]
new Vue({
el: ‘#form’,
data: {
client: [],
livetitle: null,
clientname: ”,
onlinecomputer: ”,
phases: true,
myurl: ‘https://infinityknow.com/api/learncode/friends’
},

ready: function() {
this.clientList();
},
methods: {
clientList: function(){
this.$http.get(this.myurl, function (data, status, request) {
this.$set(‘client’, data);
this.phases = false
}).error(function (data, status, request) {
alert(‘error’);
})
},
allsendproduct: function(name, computer){
this.$http.post(this.myurl, {
name: name,
computer: computer
}, function (data, status, request) {
this.client.push(data);
});
},
editItem: function(item, name, computer){
var itemId = item.id;
alert(arguments);
this.$http.put(this.myurl+’/’+itemId, {
name: name,
computer: computer
}, function (data, status, request) {
this.clientList();
});
},
removeItem: function(item){
var itemId = item.id;
this.client.$remove(item);
this.$http.delete(this.myurl+’/’+itemId, {

}, function (data, status, request) {
this.clientList();
});
},
dataadd: function(){
alert(this.clientname)
this.allsendproduct(this.clientname, this.onlinecomputer);
this.clientname = ”;
this.onlinecomputer = ”; }
}

});
[/php]

Example

Making API Calls VueResource With VueJS

[php]

methods: {
get: function() {
axiosInstance.get(‘/contactTemplate’)
.then(function (dataresult) {
this.items = dataresult.data._embedded.contactTemplate
}.bind(this))
.catch(function (error) {
alert(error)
});
}
}
[/php]

VueJS with Rest API list rendering Example

[php]
var apiconfig = {
api: ‘https://infinityknow.com/wp/v2/posts/1’,
nonce: ‘infinityknow’
};

/** GET the post method and then construct simple Vue instance with it **/
var example;
$.get({
url: apiconfig.api
}).success( function(r) {
example = new Vue({
el: ‘#post’,
data: {
post: r
}
});
});
[/php]

From Authentication to Calling an API using Vuejs

Event Handling

You should use wp_localize_script() to provide this data dynamically using WordPress
GET post and then construct Vue instance with it

[php]

var apiconfig = {
api: ‘https://infinityknow.com/wp/v2/posts/1’,
nonce: ‘hiroy’
};

var example;
$.get({
url: conf.api
}).success( function(r) {
example = new Vue({
el: ‘#post’,
data: {
post: r
},
methods: {
save: function(){
var self = this;
$.ajax( {
url: apiconfig.api,
method: ‘POST’,
senddata: function ( xhr ) {
xhr.setRequestHeader( ‘X-WP-Nonce’, apiconfig.nonce );
},
data:{
title : self.post.title.rendered,
content: self.post.content.rendered
}
} ).done( function ( dataresult ) {
alert( dataresult );
} );
}
}
});
});

[/php]

Example

READ :  vue js Login Form get http json data

Leave a Reply

Your email address will not be published.