Morioh
Login
Hudson Kunde

Hudson Kunde

1 year ago

Vue.js Axios POST Request with Laravel

There are the Following The simple About Vue JS Axios Post Request using Laravel Example and Demo Full Information With Example and source code.

As I will cover this Post with live Working example to develop Laravel Vue JS Axios Post Request Example and Demo, so the Handling Ajax Request in Vue Applications Using Axios for this example is following below.

First of all We will Simple showing step by step Vue and Axios GET Methods with Example as well as Vue js Axios HTTP Post Method Example Tutorial From Scratch now I am learning To Most Imp Mwthods for Vuejs With Axios PUT Methods with Example.

Step 1 : Setup Laravel Application

Setup fresh latest version of the Laravel 5.6 project using bellow command run On terminal

composer create-project --prefer-dist laravel/laravel atmiya25

Step 2: Define a Laravel Route

routes/web.php

Route::post('memberStores','MemberController@memberStores');

Step 3: Create Laravel New Controller

app/Http/Controllers/MemberController.php

<?php
//Laravel Vue JS Axios Post Request
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class MemberController extends Controller
{
/**
* success response method.
* Vue JS Axios Post Request using Laravel
* @return \Illuminate\Http\Response
*/
public function memberStores(Request $request)
{
return response()->json([$request->all()]);
}
}

Step 4: NPM Settings

we have Include setup of latest version of the vue js after that install npm, There for let’s run on terminal bellow command in your laravel web project.

//simple Install vue
php artisan preset vue

//Install npm modules
npm install

Step 5: Source code on myapp.js with Components

resources/assets/js/myapp.js

require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const myapp = new Vue({

el: '#myapp'

});

resources/assets/js/components/ExampleComponent.vue

<template>
<div class="pakainfo container">
<div class="pakainfo row justify-content-center">
<div class="pakainfo col-md-8">
<div class="pakainfo card">
<div class="pakainfo card-header">Laravel Vue Axios Post(laravel vue axios post) - pakainfo.com</div>

<div class="pakainfo card-body">
<form @submit="memberStores">
<strong>Member NAme:</strong>
<input type="text" class="form-control" v-model="name">
<strong>Member Information:</strong>
<textarea class="form-control" v-model="member_info"></textarea>

<button class="pakainfo btn btn-success">Submit</button>
</form>
<strong>Output:</strong>
<pre>
{{results}}
</pre>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
mounted() {
console.log('vuejs Component mounted.')
},
data() {
return {
name: '',
member_info: '',
results: ''
};
},
methods: {
memberStores(e) {
e.preventDefault();
let dataMemberObj = this;
axios.post('/memberStores', {
name: this.name,
member_info: this.member_info
})
.then(function (response) {
dataMemberObj.results = response.data;
})
.catch(function (error) {
dataMemberObj.results = error;
});
}
}
}
</script>

Step 6: Changes home.blade.php

resources/views/home.blade.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 5.6 Vue JS axios post - laravel vue axios post - pakainfo.com</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{asset('css/myapp.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
<h2>laravel vue axios post Example</h2>
<div id="myapp">
<example-component></example-component>
</div>
<script src="{{asset('js/myapp.js')}}" ></script>
</body>
</html>

I hope you get an idea about Vue JS Axios Post Request using Laravel Example and Demo.

#vue #vuejs #laravel 

Vue.js Axios POST Request with Laravel
1.55 GEEK