Today market, vue js become more well known. so today I need to impart to you how to add dynamic information structure approval utilizing php laravel in vue js application with demo. here we will utilize structure approval with axios programming interface call and show blunders utilizing vuejs.
in this model, we will make two courses in laravel application with one regulator. then in sharp edge record we will import bootstrap, vuejs and axios js documents. then we will add laravel approval in regulator document. Then we compose vue js code for dynamic structure approval.
So it's exceptionally basic model and you can hurry up use. we can likewise utilize vue js code in our other application as well. So how about we follow cry step and make it pleasant model.
Step 1: Add New Routes
In first step we need to add two routes for this example, so you need to add following route on bellow file.
routes/web.php
Route::get('vuejs/form', 'VueJSController@index');
Route::post('vuejs/form', 'VueJSController@store');
Step 2: Create New VueJSController
we need to add new controller and method for manage form and validation, first put bellow code on your VueJSController.php file.
app/Http/Controllers/VueJSController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class VueJSController extends Controller
{
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('vuejs-form');
}
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$request->validate([
'name' => 'required',
'comments' => 'required'
]);
return response()->json(['success'=>'Done!']);
}
}
Step 3: Create Blade File
Ok, now at last we need to add blade view so first create new file vuejs-form.blade.php file and put bellow code:
resources/views/vuejs-form.blade.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Simple Vuejs Form Validation with Laravel - ItSolutionStuff.com</div>
<div class="panel-body" id="app">
<form method="POST" action="/vuejs/form" class="form-horizontal" @submit.prevent="onSubmit" >
{{ csrf_field() }}
<div :class="['form-group', allerros.name ? 'has-error' : '']" >
<label for="name" class="col-sm-4 control-label">Name</label>
<div class="col-sm-6">
<input id="name" name="name" value="" autofocus="autofocus" class="form-control" type="text" v-model="form.name">
<span v-if="allerros.name" :class="['label label-danger']">@{{ allerros.name[0] }}</span>
</div>
</div>
<div :class="['form-group', allerros.comments ? 'has-error' : '']" >
<label for="comments" class="col-sm-4 control-label">Message</label>
<div class="col-sm-6">
<input id="comments" name="comments" class="form-control" type="comments" v-model="form.comments">
<span v-if="allerros.comments" :class="['label label-danger']">@{{ allerros.comments[0] }}</span>
</div>
</div>
<span v-if="success" :class="['label label-success']">Record submitted successfully!</span>
<button type="submit" class="btn btn-primary">
Send
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
form: {
name : '',
comments : '',
},
allerros: [],
success : false,
},
methods : {
onSubmit() {
dataform = new FormData();
dataform.append('name', this.form.name);
dataform.append('comments', this.form.comments);
console.log(this.form.name);
axios.post('/vuejs/form', dataform).then( response => {
console.log(response);
this.allerros = [];
this.form.name = '';
this.form.comments = '';
this.success = true;
} ).catch((error) => {
this.allerros = error.response.data.errors;
this.success = false;
});
}
}
});
</script>
</body>
</html>
0 comments:
Post a Comment
Thanks