vue-resource vue resource post data – AJAX requests Vuejs

vue-resource vue resource post data – AJAX requests Vuejs

Include Vuejs Libs

<script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script>

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)

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

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

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

index.html

<div id="Product_list">
  <h1>Latest Vue.js Commits</h1>

  <ul>
    <li v-for="prodc in Products">
       - <span class="message">{{prodc.commit.message}}</span><br>
      by <span class="author">{{prodc.commit.author.name}}</span>
      at <span class="date">{{prodc.commit.author.date}}</span>
    </li>
  </ul>

</div>

App.js

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

    }

  }
});

Call Get Method Request

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

Vuejs Post Method

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

Example