Http Post and Get Web Api Calls using Vuejs

Http Post and Get Web Api Calls using Vuejs

In this Post We Will Explain About is Http Post and Get Web Api Calls using Vuejs With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Vuejs Restful Http Post and Get Web Api Calls Example

In this post we will show you Best way to implement Making API Calls in Vuejs using $http service, hear for Fetching Data from a Third-Party API with Vue.js and Axios with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Vuejs web service call example

Include External Libs

//cdnjs.cloudflare.com/ajax/libs/vue/1.0.4/vue.min.js
//cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js
//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

index.html

<div id="liveapp">
  <div class="container">
    
    <div class="row">
      <div class="col-md-12">
        <h3>
          Vuejs - Posting Data

        </h3>
      </div>
    </div> <!-- / row -->
    
    <div class="row">
      <div class="col-md-12">
        <div class="form-group">
          <label for="your_domain">Live Domain</label>
          <input type="text" class="form-control" value="" v-model="your_domain" />
        </div>
      </div>
      <div class="col-sm-12">
        <a href="#" class="btn btn-primary" @click="checkWebsite">Check Website</a>
        <span v-if="liveAjax_res">Please Wait ...</span>
      </div>
    </div> <!-- / row -->
    
    <div>Vue.js REST API Consumption with Axios</div>
    
    <div class="row" v-if="checksite">
      <div class="col-sm-12">
        <pre>{{ $data | json }}</pre>
      </div>
    </div>
  
  </div>
  
<p>Live24u is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development. We deliver the useful and best tutorials for web professionals — developers, programmers, freelancers and site owners. Any visitors of this site are free to browse our tutorials, live demos and download scripts.</p>
</div>

index.js

Vue.http.options.emulateJSON = true; //simple send as 

new Vue({
    el: '#liveapp',
    data: {
        checksite: true,
        your_domain: '',
        liveAjax_res: false,
        postResults: []
    },
    methods: {
      checkWebsite: function() {
        this.liveAjax_res = true;
        this.$http.post('https://www.pakainfo.com/post/check', {
              your_domain: this.your_domain
            }, function (data, status, request) {
                this.postResults = data;

                this.liveAjax_res = false;
            });
      }}
});

//options get methods
    methods: {
      checkWebsite: function() {
        this.liveAjax_res = true;
        this.$http.get('https://www.pakainfo.com/get/check', {
              your_domain: this.your_domain
            }, function (data, status, request) {
                this.postResults = data;
                this.liveAjax_res = false;
            });
      }}

Vuejs web service call

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Vuejs Restful Http Post and Get Web Api Calls

I hope you have Got What is Vuejs Restful Http Post and Get Web Api Calls And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.