Skip to content
InfinityKnow

InfinityKnow

Infinity Knowledge (IK) : Technology, Articles, Topics, Facts or many More.

  • Home
  • Education
    • yttags
    • Make Money
    • Jobs
    • Programming
      • Technology
      • Web Design
      • WEB HOSTING
      • Interview
  • Entertainment
    • pakainfo
    • Sports
    • Tips and Tricks
      • Law
      • Photography
      • Travel
  • Health
    • Insurance
    • Lifestyle
      • Clothing
      • Fashion
      • Food
  • News
    • Insurance
      • Auto Car Insurance
      • Business Insurance
    • Donate
    • California
  • News
    • Political
  • Home Improvement
  • Trading
    • Marketing
    • Top Tranding
    • Business
    • Real Estate
  • Full Form
  • Contact Us
  • Life insurance quotes Quotes
  • tongue twisters
    Tongue Twisters in hindi Entertainment
  • KatmovieHD 2021: Download Latest Bollywood, Hollywood Dubbed Movies & TV Shows For Free Movies
  • Dental Implants Procedure, Cost, Uses, Benefits and Side effects Health
  • iss full form – iss Kya Hai, Meaning and Abbreviation – What is the full form of iss? full form
  • AngularJS File Upload using PHP Steps
    AngularJS File Upload using PHP Steps Technology
  • AngularJS Objects-create object-create json object-create object array
    AngularJS Objects-create object-create json object-create object array Technology
  • Vuejs Computed properties – vue watch computed property Examples
    Vuejs Computed properties – vue watch computed property Examples Technology
vue-resource vue resource post data – AJAX requests Vuejs

vue-resource vue resource post data – AJAX requests Vuejs

Posted on June 6, 2019 By admin No Comments on vue-resource vue resource post data – AJAX requests Vuejs

vue-resource vue resource post data – AJAX requests Vuejs

Include Vuejs Libs

[php]
https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js
[/php]

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)

READ :  Angularjs Expand and Collapse Animation directive

Simple Example : Get Method (Syntax)

[php]

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

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

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

index.html

[php]

Latest Vue.js Commits

  • – {{prodc.commit.message}}
    by {{prodc.commit.author.name}}
    at {{prodc.commit.author.date}}

[/php]

App.js

[php]
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);
});

}

}
});

[/php]

Call Get Method Request

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

READ :  Angular json array object string parse

Vuejs Post Method

[php]

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

}

});

[/php]

Example

Related posts:

  1. VueJS Make API GET-POST Requests With Vue Resource
  2. Vuejs Simple Navigation Menu vue router-link params
  3. vuejs toggle class – vue js v-class – Dynamic Components in Vuejs
  4. Vuejs Http Get Method with parameters – Vue-Resource Get Request
Technology, VueJs Tags:vue axios, vue axios post, vue-resource example, vue-resource post example, vue-resource post file, vue-resource tutorial, vue-resource vs axios, vuejs post data

Post navigation

Previous Post: Vue Restful API and axios API Example – Vue js rest api authentication
Next Post: Vue.js Unknown Custom Element Solution

Related Posts

  • C# Extension Methods Tutorial with Examples Technology
  • PHP Automatically Auto Post
    PHP Automatically Auto post Content into Blogspot Technology
  • C# Collections Tutorial with Examples Technology
  • PHP Laravel 6 Read And Write Cookie Technology
  • AngularJS File Upload using Ajax POST Form Web API
    AngularJS File Upload using Ajax POST Form Web API Technology
  • Social Media Auto Post on Google Plus Using PHP API
    Social Media Auto Post on Google Plus Using PHP API Articles

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Account web hosting (1)
  • AngularJs (277)
  • Articles (143)
  • Asp.Net (49)
  • Astrology (2)
  • Attorney (7)
  • Auto Car Insurance (4)
  • Biography (2)
  • Business (9)
  • Business Insurance (3)
  • California (4)
  • Choose the web hosting (1)
  • Clothing (6)
  • cloud (8)
  • Cloud data storage (2)
  • Credit (1)
  • Dedicated hosting server web (1)
  • Dedicated server web hosting (1)
  • Dedicated web hosting (1)
  • Degree (11)
  • Design (9)
  • Differences shared hosting (1)
  • Donate (2)
  • Education (37)
  • Energy web hosting (1)
  • Entertainment (6)
  • Facts (12)
  • Fashion (3)
  • Finance (3)
  • Food (5)
  • full form (90)
  • Google Adsense (22)
  • Health (20)
  • Home Improvement (5)
  • Insurance (6)
  • Interview (2)
  • Jobs (6)
  • jquery (2)
  • jQuery (2)
  • Laravel (164)
  • Lawyer (4)
  • Lifestyle (6)
  • Loans (6)
  • Make Money (31)
  • Managed dedicated server (1)
  • Managed hosting solution (1)
  • Managed servers (1)
  • Marketing (8)
  • Mortgage (2)
  • Movies (21)
  • MySQL (180)
  • News (5)
  • Photography (1)
  • PHP (250)
  • Programming (18)
  • Quotes (75)
  • Real Estate (2)
  • SEO (9)
  • Shared web hosting (1)
  • Shayari (67)
  • Sports (5)
  • Status (34)
  • Stories (45)
  • suvichar (8)
  • Tech (3)
  • Technology (675)
  • Tips and Tricks (42)
  • Top Tranding (35)
  • Trading (28)
  • Travel (12)
  • Uncategorized (8)
  • VueJs (179)
  • Web Design (2)
  • WEB HOSTING (1)
  • Web hosting company (1)
  • Web hosting really (1)
  • Web hosting windows (1)
  • Which website hosting (1)
  • Wishes (13)
  • wordpress (15)

Categories

AngularJs (277) Articles (143) Asp.Net (49) Attorney (7) Business (9) Clothing (6) cloud (8) Degree (11) Design (9) Education (37) Entertainment (6) Facts (12) Food (5) full form (90) Google Adsense (22) Health (20) Home Improvement (5) Insurance (6) Jobs (6) Laravel (164) Lifestyle (6) Loans (6) Make Money (31) Marketing (8) Movies (21) MySQL (180) News (5) PHP (250) Programming (18) Quotes (75) SEO (9) Shayari (67) Sports (5) Status (34) Stories (45) suvichar (8) Technology (675) Tips and Tricks (42) Top Tranding (35) Trading (28) Travel (12) Uncategorized (8) VueJs (179) Wishes (13) wordpress (15)
  • Angular Filter Nested JSON Hierarchical Treeview in Controller
    Angular Filter Nested JSON Hierarchical Treeview in Controller Technology
  •  Moderate Treks In India  Articles
  • AngularJS UI Grid Sorting Filtering Paging Grouping Example
    AngularJS UI Grid Sorting Filtering Paging Grouping Example Technology
  • Vuejs Custom Filters -date currency array-objects vuejs filter
    Vuejs Custom Filters -date currency array-objects vuejs filter Technology
  • Birthday quotes Quotes
  • Angular ng blur Event Example Technology
  • Laravel 5.8 Check if file exists or not
    Laravel 5.8 Check if file exists or not PHP
  • Angular Material Carousel Image Sliders – AngularJS Responsive Carousel
    Angular Material Carousel Image Sliders – AngularJS Responsive Carousel Technology

Copyright © 2022 InfinityKnow.

Powered by PressBook News WordPress theme