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
<div id="form"> <section class="container"> <form class="r-form"> <div class="form-group"> </div> <div class="form-group"> </div> </form> <div class="loader"> <div class="loader__figure"></div> </div> <ul class="list-unstyled row r-list"> <li class="col-xs-12 col-sm-4 col-md-3"> <div class="r-list__item"> <div> <span class="r-list__title"> <strong>{{ (item.name ? item.name : 'noname') | json | capitalize}}</strong> </span> <div class="form-group"> </div> </div> <p> <span class="r-list__title"> {{ (item.computer ? item.computer : 'nocomputer') | json | capitalize}} </span> <div class="form-group"> </div> </p> <button type="button" class="close"><span>×</span></button> </div> </li> </ul> </section> </div>
index.js
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 = ''; } } });
Making API Calls VueResource With VueJS
E-junkie: Sell digital downloads online
E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!
Also see:
methods: { get: function() { axiosInstance.get('/contactTemplate') .then(function (dataresult) { this.items = dataresult.data._embedded.contactTemplate }.bind(this)) .catch(function (error) { alert(error) }); } }
VueJS with Rest API list rendering Example
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 } }); });
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
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 ); } ); } } }); });