Vuejs RESTful Web Service Example – Vue RESTful APIs VueResource

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 = '';        }
    }

});

Example

Making API Calls VueResource With VueJS

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 );
                } );
            }
        }
    });
});

Example