Vue JS 2 Tutorial #32 - HTTP Requests

----- COURSE LINKS:

---------------------------------------------------------------------------------------------

========== PSD to WordPress Playlist ==========

============== The Net Ninja =====================

================== Social Links ==================

[leootp]

FOR ANYONE USING AXIOS!!!

First, this is an awesome tutorial!

Axios is easy to use with this. Just follow the axios install as usual, making sure to install axios in the project directory. Then change "this.$http.post" to "axios.post".

The only thing I had an issue with was scope on "this" within the post function as the this being accessed was not the correct one (unless, and this is quite possible, I am a complete and utter noob, witness me). Use fat arrow syntax to get the right "this".

The following is the code I used right after the axios.post block, right where the first "then" begins. If you replace the middle portion with this it works just fine.

then(data => {
console.log(data);
this.submitted = true;
})

[siphosibanda]

Like the way you teach simple, fast and precise

[bimalgrg]

Vue resource is now officially discontinued. It has been recommended to use Axios.

[MB-gfzd]

Hello,
You are right, it is the best VUEjs 2 tutorial, well done ;-)
I'm waiting Your amazing Tuts ...
Many thanks .

[Jtrpka]

May not use Vue Resources, but I find that JSON placeholder site very nifty.

[albertdumlao]

very informative tutorial. How about laravel 5.3 with axios tutorial.

[abeautyqueenofonly]

MAKE SURE TO RUN npm i --save axios, and paste the code
<template>
<div id="blog_app">
<h1>Add Blog</h1>
<div class="row">
<div class="offset-md-3 col-6 ">
<form action="">
class="form-label" for="title">Blog Title</label>
class="form-control" v-model="blog.title" type="text" name="title" >
class="form-label" for="title">Blog Content</label>
class="form-control" cols="20" rows="3" v-model="blog.content" name="content" ></textarea><label class="form-label" for="title">Choose Color</label>
class="row">
class="col-md-12">
class="form-label" for="title">Red</label>
type="checkbox" v-model="blog.category" value="Red">


class="form-label" for="title">Blue</label>
type="checkbox" v-model="blog.category" value="Blue">


class="form-label" for="title">Purple</label>
type="checkbox" v-model="blog.category" value="Purple">


class="form-label" for="title">Green</label>
type="checkbox" v-model="blog.category" value="Green">

class="form-label" for="title">Choose Color</label>
class="row">
class="col-md-12">
for="" class="form-label">Choose Category</label>
v-model="blog.fun">
value="Fun">Fun</option>





<button Blog</button>
</form>
<div id="preview">

Title : {{ blog.title }} </p>
Content : {{ blog.content }} </p>
:</p>

<li v-for="cat in blog.category">{{ cat }}</li>

: {{blog.fun}}</p>


</div>
</div>


</div>

</div>
</template>
<script>
import axios from 'axios';
export default{
data(){
return {
blog:{




},

}
},
methods:{
post_blog:function(){

this.blog.content,



}).then(function(data){

});
}
}
};
</script>
<style scoped>
#preview{
border: 2px solid red;
padding: 25px 13px;
}
</style>

[carlinogonzalez]

How did anyone unlike this? The first unlikes I see on this series!! Well done man, you are such an amazing teacher...!!

[himthakur]

Ajax vs xhr vs fetch api vs axios
Which one should we use?

[TheNerdyDev]

Sir please make a tutorial on how to make request using axios in vue.js as an extension to this awesome series!! Or in general how to make an axios request

[crashoverride]

Nice English accent, watching software tutorial and learning language pronunciation in paralel! =)

[AS-zwlk]

You assassinate the other tuts out there with your stealthy teaching abilities. It's almost unfair to ask but would you consider some tuts which discuss strategies for creating components - perhaps by decomposing various sites. It looks like components are here to stay (for a while at least) on the front end and on the backend too (microservices). Thanks for all your hard work Net Ninja. PS: I really like that you keep each video around 10 mins.

[nickgotsis]

This is an amazing tut, cheers! How do you get past CORS here?

[ismahenelarbi]

Thanks for the tut :)
In my response, the statusText is empty, is that ok ?
I used v-show instead of v-if for the success message, it's more direct.

[carlosreategui]

greetings form argentina u re the best

[balance]

Amazing tutorial! Keep up the great work

[webhero]

Dont work with vue-resource - Uncaught Error: Cannot find module "vue-editor-bridge"/ Advices?

[husamk]

very thanks for your efforts, it's very useful
but i have a question can we use nodejs for server side work and keep vue for client side only ?
and what is the best choice for server side work along with vue.js ?

[marcoiung]

Question: How to resolve CORS problem with VUE and Vue-Resources?

[leoreadss]

It is possible to insert icon flag in the select option?