Store multiple data with file upload and insert in multiple rows in database - file-upload

I want to store some data in multiple rows in database. I can store this data without any file. But I cannot store data with file. How can I store data with upload file and also empty file field. Please help. It will be more helpful for me.
My contoller is look like this:
public function store(Request $request) {
$id = '12';
foreach($request->pass_issue_con as $key=>$v) {
$data = [
'emp_id'=>$id,
'pass_issue_con'=>$v,
'pass_no'=>$request->pass_no[$key],
'pass_issue'=>$request->pass_issue[$key],
'pass_expiry'=>$request->pass_expiry[$key],
'pass_biometric'=>$request->pass_biometric[$key],
'pass_doc'=>$request->pass_doc[$key]
];
EmployeeTravelDocumentsInfo::insert($data);
}
return redirect()->back()->with('message', 'Data Has Been Submitted Successfully!');
}
My Blade file is look like this:
<form action="{{ route('registration.store') }}" method="post" enctype="multipart/form-data">
#csrf
<td>
<select class="form-control select2" style="width: 100%;" name="pass_issue_con[]">
<option value="N/A">Choose an item...</option>
#foreach( $countries as $country)
<option value="{{$country->id}}">{{$country->nicename}}</option>
#endforeach
</select>
</td>
<td><input type="text" name="pass_no[]" class="form-control" style="width:160px;"></td>
<td><input type="date" name="pass_issue[]" class="form-control"></td>
<td><input type="date" name="pass_expiry[]" class="form-control"></td>
<td>
<select class="form-control select2" style="width: 100%;" name="pass_biometric[]">
<option>Choose an item...</option>
<option value="0">Yes</option>
<option value="1">No</option>
</select>
</td>
<td><input type="file" class="form-control" name="pass_doc[]" style="width:160px;" multiple></td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-md-12 mt-3 pb-3 pr-3 text-right"><input type="submit" name="" value="SAVE" class="btn btn-lg btn-success"></div>
</div>
</form>
$('.pass thead').on('click', '.passAdd', function(){
var pass = "<tr>"+
"<td><a href='javascript:void(0)' class='btn btn-sm btn-danger passDelete'>-</a></td>"+
"<td>"+
"<select class='form-control select2' style='width: 100%;' name='pass_issue_con[]'>"+
"<option>Choose an item...</option>"+
"#foreach( $countries as $country)"+
"<option value='{{$country->id}}'>{{$country->nicename}}</option>"+
"#endforeach"+
"</select>"+
"</td>"+
"<td class='column'><input type='text' name='pass_no[]' class='form-control'></td>"+
"<td class='column'><input type='date' name='pass_issue[]' class='form-control'></td>"+
"<td class='column'><input type='date' name='pass_expiry[]' class='form-control'></td>"+
"<td class='column'><select class='form-control' style='width: 100%;' name='pass_biometric[]'>"+
"<option>Choose an item...</option>"+
"<option value='0'>Yes</option>"+
"<option value='1'>No</option>"+
"</select>"+
"</td>"+
"<td><input type='file' class='form-control' name='pass_doc[]'></td>"+
"</tr>"
$('.pass tbody').append(pass);
$('.pass tbody').on('click', '.passDelete', function(){
$(this).parent().parent().remove();
});
});

Related

ASP .NET core Razor page - Avoid refreshing the page

I have tow buttons in one Form, first button for add website info to a local table and second button for add social media info to another table, after all info added locally,
then I can click on 'add all info' button for add all info in same time to database.
My question is how can I add info to a table without refreshing the page?
AddAllInfo.cshtml:
<div class="col-md-6 mb-3">
<label class="form-label" asp-for="NewWebSiteInfo.websiteName">Website URL</label>
<input type="text" asp-for="NewWebSiteInfo.websiteName" class="form-control" />
</div>
<div class="col-md-6 mb-3">
<label class="form-label" asp-for="NewWebSiteInfo.websiteUrl">Website URL</label>
<input type="text" asp-for="NewWebSiteInfo.websiteUrl" class="form-control" />
</div>
<button type="submit" validatedisable="True" asp-page-handler="AddWebsiteInfo" class="btn btn-primary" >Add Website info</button>
<div class="mb-3">
#if (AddInfoModel.WebSitelist.Count > 0)
{
<div class="col-12 border p-3">
<table class="table table-striped table-bordered">
<thead style="background-color:lightgray">
<tr>
<th>WebsiteName</th>
<th>websiteURL</th>
</tr>
</thead>
<tbody>
#foreach (Website item in AddAllInfoModel.WebSitelist)
{
<tr>
<td>#item.WebsiteName</td>
<td>#item.websiteURL</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
</br>
</br>
<div class="col-md-6 mb-3">
<label class="form-label" asp-for="NewSocialMediaInfo.SocialMediaName">Social Media</label>
<input type="text" asp-for="NewSocialMediaInfo.SocialMediaName" class="form-control" />
</div>
<div class="col-md-6 mb-3">
<label class="form-label" asp-for="NewSocialMediaInfo.SocialMediaAccount">Account</label>
<input type="text" asp-for="NewSocialMediaInfo.SocialMediaAccount" class="form-control" />
</div>
<button type="submit" validatedisable="True" asp-page-handler="AddSocialMediaInfo" class="btn btn-primary" >Add socil Media info</button>
<div class="mb-3">
#if (AddInfoModel.SocialMedialist.Count > 0)
{
<div class="col-12 border p-3">
<table class="table table-striped table-bordered">
<thead style="background-color:lightgray">
<tr>
<th>SocialMediaName</th>
<th>SocialMediaAccount</th>
</tr>
</thead>
<tbody>
#foreach (SocialMedia item in AddAllInfoModel.SocialMedialist)
{
<tr>
<td>#item.SocialMediaName</td>
<td>#item.SocialMediaAccount</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
</br>
<div class="col-4 offset-2">
<button type="submit" class="btn btn-primary form-control"> Add all info </button>
</div>
</form> ```
AddAllInfo.cshtml.cs:
public void OnPostAddSocialMediaInfo()
{
SocialMedialist.Add(new SocialMedia { SocialMediaName = NewSocialMediaInfo.SocialMediaName,
SocialMediaAccount=NewSocialMediaInfo.SocialMediaAccount});
}
public void OnPostAddWebsiteInfo()
{
WebSitelist.Add(new WebSite { WebSiteName = NewWebSiteInfo.WebsiteName,
websiteUrl =NewWebSiteInfo.websiteUrl});
}
You can use js to pass data to handler,and then use js to add html to tbody,here is a demo to add data to table without refresh the page:
<div class="col-md-6 mb-3">
<label class="form-label" asp-for="NewWebSiteInfo.websiteName">Website URL</label>
<input type="text" asp-for="NewWebSiteInfo.websiteName" class="form-control" />
</div>
<div class="col-md-6 mb-3">
<label class="form-label" asp-for="NewWebSiteInfo.websiteUrl">Website URL</label>
<input type="text" asp-for="NewWebSiteInfo.websiteUrl" class="form-control" />
</div>
<input type="button" onclick="AddWebsiteInfo()" class="btn btn-primary" value="Add Website info">
<div class="mb-3">
#if (AddInfoModel.WebSitelist.Count > 0)
{
<div class="col-12 border p-3">
<table class="table table-striped table-bordered">
<thead style="background-color:lightgray">
<tr>
<th>WebsiteName</th>
<th>websiteURL</th>
</tr>
</thead>
<tbody>
#foreach (Website item in AddAllInfoModel.WebSitelist)
{
<tr>
<td>#item.WebsiteName</td>
<td>#item.websiteURL</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
</br>
</br>
<div class="col-md-6 mb-3">
<label class="form-label" asp-for="NewSocialMediaInfo.SocialMediaName">Social Media</label>
<input type="text" asp-for="NewSocialMediaInfo.SocialMediaName" class="form-control" />
</div>
<div class="col-md-6 mb-3">
<label class="form-label" asp-for="NewSocialMediaInfo.SocialMediaAccount">Account</label>
<input type="text" asp-for="NewSocialMediaInfo.SocialMediaAccount" class="form-control" />
</div>
<input type="button" onclick="AddSocialMediaInfo()" class="btn btn-primary" value="Add socil Media info">
<div class="mb-3">
#if (AddInfoModel.SocialMedialist.Count > 0)
{
<div class="col-12 border p-3">
<table class="table table-striped table-bordered">
<thead style="background-color:lightgray">
<tr>
<th>SocialMediaName</th>
<th>SocialMediaAccount</th>
</tr>
</thead>
<tbody>
#foreach (SocialMedia item in AddAllInfoModel.SocialMedialist)
{
<tr>
<td>#item.SocialMediaName</td>
<td>#item.SocialMediaAccount</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
</br>
<div class="col-4 offset-2">
<input type="button" onclick="AddAllInfo()" class="btn btn-primary" value="Add all info">
</div>
</form> ```
js:
#section Scripts{
<script>
function AddWebsiteInfo() {
var NewWebSiteInfo = {
'websiteName': $("#NewWebSiteInfo_websiteName").val(),
'websiteUrl': $("#NewWebSiteInfo_websiteUrl").val()
};
$.ajax({
type: 'POST',
url: '?handler=AddWebsiteInfo',
data: NewWebSiteInfo,
headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
dataType: 'json',
success: function (data) {
var html = "<tr><td>" + data.websiteName + "</td><td>" + data.websiteUrl + "</td></tr>";
$("tbody")[0].innerHTML = $("tbody")[0].innerHTML + html;
}
});
}
function AddSocialMediaInfo() {
var NewAddSocialMediaInfo = {
'SocialMediaName': $("#NewSocialMediaInfo_SocialMediaName").val(),
'SocialMediaAccount': $("#NewSocialMediaInfo_SocialMediaAccount").val()
};
$.ajax({
type: 'POST',
url: '?handler=AddSocialMediaInfo',
data: NewAddSocialMediaInfo,
headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
dataType: 'json',
success: function (data) {
var html = "<tr><td>" + data.socialMediaName + "</td><td>" + data.socialMediaAccount + "</td></tr>";
$("tbody")[1].innerHTML = $("tbody")[1].innerHTML + html;
}
});
}
function AddAllInfo() {
AddWebsiteInfo();
AddSocialMediaInfo();
}
</script>
}
handler:
[BindProperty]
public WebSiteInfo NewWebSiteInfo { get; set; }
[BindProperty]
public SocialMediaInfo NewSocialMediaInfo { get; set; }
public void OnGet()
{
}
public JsonResult OnPostAddWebsiteInfo()
{
WebSitelist.Add(new WebSite { WebSiteName = NewWebSiteInfo.WebsiteName,
websiteUrl =NewWebSiteInfo.websiteUrl});
return new JsonResult(NewWebSiteInfo);
}
public JsonResult OnPostAddSocialMediaInfo()
{
SocialMedialist.Add(new SocialMedia { SocialMediaName = NewSocialMediaInfo.SocialMediaName,
SocialMediaAccount=NewSocialMediaInfo.SocialMediaAccount});
return new JsonResult(NewSocialMediaInfo);
}
The best way to do this is to run the post request in javascript, this will not refresh the page.
2nd option is by calling the get method again at the end of the post method and then passing the model with the data to the get. So that when the page refreshes the data is filled in again

How to replace in Laravel 8

You can see I can add numbers by doing CRUD operation in laravel
I have added 1.6 and it shows 1.6
But I want when I add 1.6 it will replace and will show one point six
This is NumberController.php
public function index()
{
$products = Product::latest()->paginate(5);
return view('products.index',compact('products'))
->with('i', (request()->input('page', 1) - 1) * 5);
}
public function store(Request $request)
{
$request->validate([
'name' => 'required',
'detail' => 'required',
]);
Product::create($request->all());
return redirect()->route('products.index')
->with('success','Product created successfully.');
}
I will add my value here
This is my create.blade.php
<form action="{{ route('products.store') }}" method="POST">
#csrf
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
<input type="text" name="name" class="form-control" placeholder="Name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Detail:</strong>
<input type="double" name="detail" class="form-control" placeholder="Detail">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
I have to show replace value here
This is my index.blade.php
<table class="table table-bordered">
<tr>
<th>No</th>
<th>Name</th>
<th>Details</th>
<th width="280px">Action</th>
</tr>
#foreach ($products as $product)
<tr>
<td>{{ ++$i }}</td>
<td>{{ $product->name }}</td>
<td>{{ $product->detail }}</td>
<td>
<form action="{{ route('products.destroy',$product->id) }}" method="POST">
<a class="btn btn-info" href="{{ route('products.show',$product->id) }}">Show</a>
<a class="btn btn-primary" href="{{ route('products.edit',$product->id) }}">Edit</a>
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>
</form>
</td>
</tr>
#endforeach
</table>

How to pass HTML label value to PageModel on form submission

Not sure if it can be done, but how would I assign an HTML label value to a BindProperty.
In my PageModel, I have a List of DateTimes I generate and this list is used in the Razor Page and displayed on rows. (submissionDates is the list)
<tbody>
#foreach (var item in Model.submissionDates)
{
<tr>
<td>
<div class="form-group">
<label asp-for="Timesheet.TimesheetStart" class="control-label">#item.Date</label>
</div>
</td>
<td>
<div class="form-group">
<label asp-for="Timesheet.TimesheetNotes" class="control-label">Submission Notes</label>
<textarea asp-for="Timesheet.TimesheetNotes" class="form-control" id="NotesTextArea" rows="3"></textarea>
</div>
</td>
<td>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-primary" />
</div>
</td>
</tr>
}
</tbody>
In the OnPost of the PageModel I need the date from the row submitted to add to the Model.
public async Task<IActionResult> OnPostAsync()
{
string weekSelected = Request.Form["Timesheet.TimesheetStart"];
var emptyTimesheet = new Timesheet()
{
Submitted = DateTime.Now,
TimesheetStart = DateTime.Parse(weekSelected),
TimesheetEnd = TimesheetStart.AddDays(7),
ColleagueID = UserColleague,
BranchID = (int)branchFilter
};
if ( await TryUpdateModelAsync<Timesheet>(
emptyTimesheet,
"timesheet",
s => s.TimesheetNotes
))
{
_context.Timesheets.Add(emptyTimesheet);
await _context.SaveChangesAsync();
return RedirectToPage("./Index");
}
return Page();
}
I have tried using Model Binding like I have with TimesheetNotes but that was null, the attempt shown above is reading straight from the Form Response and this is also null.
Am I going about this the wrong way or in my scenario is getting that label value not possible?
You can use a hidden input,which name is Timesheet.TimesheetStart,.net core bind data with name attribute.And you need to set its value with #item.Date.Then you need to put form outside <tr></tr>,so that when you click the button,it will only post the values of the current row rather than all the rows.
<tbody>
#foreach (var item in Model.submissionDates)
{
<form method="post">
<tr>
<td>
<div class="form-group">
<label asp-for="Timesheet.TimesheetStart" class="control-label">#item.Date</label>
<input hidden name="Timesheet.TimesheetStart" value=#item.Date>
</div>
</td>
<td>
<div class="form-group">
<label asp-for="Timesheet.TimesheetNotes" class="control-label">Submission Notes</label>
<textarea asp-for="Timesheet.TimesheetNotes" class="form-control" id="NotesTextArea" rows="3"></textarea>
</div>
</td>
<td>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-primary" />
</div>
</td>
</tr>
</form>
}
</tbody>
result:
Only INPUT elements will be available in the Request.Form. You can use an HTML Hidden field for each label. With hidden fields, you can do model binding as well.
<div class="form-group">
<label asp-for="Timesheet.TimesheetStart" class="control-label">#item.Date</label>
<input type="hidden" asp-for="Timesheet.TimesheetStart" />
</div>

Nested Form Groups & FromArray in Angular 8

I working on form which has nested form groups & form arrays but I am not able to bind values in ts.
I am new to angular so dont have much clarity on formgroup and form arrays.
below json can have multiple arrays within formgroups and nested form arrays within form group.
Here is the sample example which i want to execute and make below json structure from this form
Json using this form :
{
ip:'1.2.3.4',
create_adjacency:{
customerName:'ABC',
traffic_group:[{
_display_name:'DEF',
traffic_group_limits:{
calls:'23' }
}]
}
}
HTML -
<div class="page-container pb-25 ">
<form [formGroup]="firstFormGroup">
<div class="form-group custom-input select-custom-prime">
<label>IP</label>
<input
placeholder="Select"
formControlName="ip"
/>
</div>
<div class="row mb-20" formGroupName="create_adjacency">
<div class="col-xl-4 col-lg-6 col-md-6">
<div
class="form-group custom-input select-custom-prime"
>
<label>Customer Name</label>
<input
placeholder="Select"
formControlName="customerName"
/>
</div>
</div>
<div formArrayName="traffic_group">
<div class="col-xl-3 col-lg-6 col-md-6">
<div
class="form-group custom-input mr-10 select-custom-prime" >
<label>Traffic group Name</label>
<input
formControlName="_display_name"
/>
</div>
</div>
<table
class="mt-30 table table-striped table-bordered wd-98"
>
<thead>
<tr>
<th>Traffic Group Name</th>
<th>Concurrent Calls</th>
</tr>
</thead>
<tbody formGroupName="traffic_group_limits">
<tr>
<td>
<div class="">
<div
class="form-group custom-input select-custom-prime"
>
<input
pInputText
autofocus
disabled
type="text"
class="form-control"
/>
</div>
</div>
</td>
<td>
<div class="">
<div
class="form-group custom-input select-custom-prime"
>
<input
formControlName="calls"
pInputText
autofocus
class="form-control"
/>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
Ts code -
this.firstFormGroup = this.formBuilder.group({
ip: [''],
create_adjacency: this.formBuilder.group({
customerName: ["", Validators.required],
traffic_groups: this.formBuilder.array([this.traffic_groups])
})
});
get traffic_groups(): FormGroup {
return this.formBuilder.group({
_display_name: ["", Validators.required],
traffic_group_limits: this.formBuilder.group({
"call-appearances": ["", Validators.required]
})
});
}
In my opinion, as much angular has their own way of doing this, it might be a little intimidating to a beginner. So I prefer breaking down the formgroups and then constructing the final json from all the forms all together.
.html
<div class="page-container pb-25 ">
<form [formGroup]="firstFormGroup">
<div class="form-group custom-input select-custom-prime">
<label>IP</label>
<input
placeholder="Select"
formControlName="ip"
/>
</div>
<div class="row mb-20" [formGroup]="adjacencyFormGroup">
<div class="col-xl-4 col-lg-6 col-md-6">
<div
class="form-group custom-input select-custom-prime"
>
<label>Customer Name</label>
<input
placeholder="Select"
formControlName="customerName"
/>
</div>
</div>
<div [formGroup]="trafficFormGroup">
<div class="col-xl-3 col-lg-6 col-md-6">
<div
class="form-group custom-input mr-10 select-custom-prime" >
<label>Traffic group Name</label>
<input
formControlName="_display_name"
/>
</div>
</div>
<table
class="mt-30 table table-striped table-bordered wd-98"
>
<thead>
<tr>
<th>Traffic Group Name</th>
<th>Concurrent Calls</th>
</tr>
</thead>
<tbody [formGroup]="trafficGroupLimit">
<tr>
<td>
<div class="">
<div
class="form-group custom-input select-custom-prime"
>
<input
pInputText
autofocus
disabled
type="text"
class="form-control"
/>
</div>
</div>
</td>
<td>
<div class="">
<div
class="form-group custom-input select-custom-prime"
>
<input
formControlName="calls"
pInputText
autofocus
class="form-control"
/>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
.ts
this.firstFormGroup = this.formBuilder.group({
ip: [''],
create_adjacency: [{}]
});
this.adjacencyFormGroup = this.formBuilder.group({
customerName: ["", Validators.required],
traffic_groups: [[]])
});
this.trafficFormGroup = this.formBuilder.group({
_display_name: ["", Validators.required],
traffic_group_limits: [{}]
});
this.trafficGroupLimit = this.formBuilder.group({
calls: [''],
});
function to create json
createFormJSON() {
this.trafficFormGroup.patchValue({
traffic_group_limits: this.trafficGroupLimit.value
});
this.adjacencyFormGroup.patchValue({
traffic_groups: this.allTrafficGroups // store all traffic groups in this array before patching
});
this.firstFormGroup.patchValue({
create_adjacency: this.adjacencyFormGroup.value,
});
}

VueJS how to rerender a component

I have a VueJS component which populates a table via ajax, than I have a modal form inside component which creates new entries in table.
On modal hide I want to update the table to show new entries.
export default {
created() {
axios.get('/api/v1/customers')
.then(response => {
this.customers = response.data;
});
},
methods: {
store() {
this.form.errors = [];
axios.post('/api/v1/customers', this.form)
.then(response => {
this.form.name = '';
this.form.scopes = [];
this.form.errors = [];
$('#modal-edit-client').modal('hide');
this.$forceUpdate();
})
.catch(error => {
console.log(error)
/*if (typeof error.response.data === 'object') {
this.form.errors = _.flatten(_.toArray(error.response.data));
} else {
this.form.errors = ['Something went wrong. Please try again.'];
}*/
});
},
newUser: function () {
$('#modal-edit-client').modal('show');
},
edit: function () {
alert('edit modal')
}
},
data() {
return {
customers: {},
alert: {
show: false,
type: null,
title: null,
message: null,
},
form: {
scopes: [],
errors: []
}
};
}
}
I tried to use $forceUpdate() but does not seems to work
output template
<template>
<div class="row" v-cloak>
<div class="col-md-12 ">
<div class="panel panel-default custom-panel">
<div class="panel-heading">
<strong>Customers</strong>
<div id="custom-search-input">
<div class="input-group col-md-12">
<input v-on:keyup.enter="filter" type="text" class="form-control input-sm" placeholder="Search Customer" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
<a class="btn icon-btn btn-success" id="new__item" href="#" #click="newUser">
<span class="glyphicon btn-glyphicon glyphicon-plus img-circle text-success"></span> Add Customer
</a>
</div>
<div class="panel-body">
<table class="table table-condensed">
<tbody>
<tr>
<th style="width: 10px">#</th>
<th>Firma</th>
<th>Strasse</th>
<th>PLZ</th>
<th>Ort</th>
<th>Tel</th>
<th>Status</th>
<th>Actions</th>
</tr>
<tr v-for="customer in customers">
<td>{{ customer.id }}</td>
<td>{{ customer.customer_name }}</td>
<td>{{ customer.customer_street }}</td>
<td>{{ customer.customer_plz }}</td>
<td>{{ customer.customer_city }}</td>
<td>{{ customer.customer_telephone }}</td>
<td><span class="badge bg-green"><i class="fa fa-check"></i></span></td>
<td class="actions">
<i class="fa fa-pencil"></i>
<i class="fa fa-trash"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Edit Client Modal -->
<div class="modal fade" id="modal-edit-client" tabindex="-1" role="dialog">
<div class="spinner"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button " class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
Add Customer
</h4>
</div>
<div class="modal-body">
<!-- Form Errors -->
<!--<div class="alert alert-danger" v-if="alert" >
<p><strong>Whoops!</strong> Something went wrong!</p>
<br>
</div>-->
<!-- Edit Client Form -->
<form class="form-horizontal" id="modal-create-customer" role="form" method="POST" action="">
<div class="row">
<div class="col-xs-12">
<label for="customer_name" class="control-label">Firmenbezeichnung</label>
<input id="customer_name" type="text" class="form-control" v-model="form.customer_name" name="customer_name" value="" required autofocus>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="sex" class="control-label">Anrede</label>
<select v-model="form.customer_contact_sex" name="title" id="sex" class="form-control">
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="title" class="control-label">Title</label>
<select v-model="form.customer_contact_title" name="title" id="title" class="form-control">
<option value="">No title</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
</select>
<span class="help-block">
<strong></strong>
</span>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label for="name" class="control-label">First Name</label>
<input id="name" type="text" class="form-control" v-model="form.customer_first_name" name="customer_name" value="" required autofocus>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="email" class="control-label">Last Name</label>
<input id="email" type="text" class="form-control" v-model="form.customer_last_name" name="customer_last_name" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="street" class="control-label">Street</label>
<input id="street" type="text" class="form-control" v-model="form.customer_street" name="customer_street" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-2">
<label for="plz" class="control-label">PLZ</label>
<input id="plz" type="text" class="form-control" v-model="form.customer_plz" name="customer_plz" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-4">
<label for="city" class="control-label">City</label>
<input id="city" type="text" class="form-control" v-model="form.customer_city" name="customer_city" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="customer_telephone" class="control-label">Tel.</label>
<input id="customer_telephone" type="text" class="form-control" v-model="form.customer_telephone" name="customer_telephone" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="customer_fax" class="control-label">Fax.</label>
<input id="customer_fax" type="text" class="form-control" name="customer_fax" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="customer_mobile" class="control-label">Mobil</label>
<input id="customer_mobile" type="text" class="form-control" name="customer_mobile" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="customer_email" class="control-label">E-Mail.</label>
<input id="customer_email" type="text" class="form-control" name="customer_email" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-12">
<label for="customer_note" class="control-label">Notiz</label>
<textarea name="csutomer_note" id="customer_note" class="form-control"></textarea>
<span class="help-block">
<strong></strong>
</span>
</div>
</div>
</form>
</div>
<!-- Modal Actions -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" #click="store">
Register
</button>
</div>
</div>
</div>
</div>
</div>
</template>
As said in the comments, your code looks fine except that you're not actually updating the customers property with anything.
When you're performing the XHR request with Axios, you need to use the response to populate the component, which will automatically update the relevant DOM.
Here is the relevant part of your code that you should modify:
axios.post('/api/v1/customers', this.form)
.then(response => {
this.form.name = '';
this.form.scopes = [];
this.form.errors = [];
// Set the component's customers property to what you get
// in the response
this.customers = response.data.customers;
$('#modal-edit-client').modal('hide');
// You don't need to forceUpdate as Vue will take care of
// rerendering the relevant parts of the DOM
// this.$forceUpdate();
})
Also, considering you're expecting an array of customers to render the table, you should set the customers default value accordingly:
data() {
return {
customers: []
// ...
};
}