Laravel - vue.js component working locally, but not found in production - laravel

I have vue.js components in my app. This is the first time ever receiving this message in the console.
The picture where 3 boxes are shown is the local machine, where it works and shows the users info.
The next picture only show 1 out of 3 boxes, with the "example" component.
Code:
The component:
<template>
<div>
<loading-spinner v-if="!data_is_fetched"></loading-spinner>
<div v-else-if="data_is_fetched">
<!-- Modalbox -->
<div>
<div v-if="modalbox" #close="modalbox = false">
<edit-user-information-modal v-if="modalboxType === 1" #close="modalbox = false" #postSucces="fetchData()"
:student="record.user">
</edit-user-information-modal>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-sm-12">
<div class="card box-shadow border-0">
<div class="card-header bg-transparent justify-content-between d-flex align-text-center">
Min bruger
</div>
<div class="card-body">
<div class="row">
<div class="col-6">
<p><span class="font-weight-bold">Navn:</span></p>
<p><span class="font-weight-bold">Fødselsdato:</span></p>
<p><span class="font-weight-bold">Email:</span></p>
<p><span class="font-weight-bold">Telefonnummer:</span></p>
<p><span class="font-weight-bold">Brugertype:</span></p>
<p><span class="font-weight-bold">Vejnavn & husnummer:</span></p>
<p><span class="font-weight-bold">Postnummer og by:</span></p>
<p><span class="font-weight-bold">Land:</span></p>
</div>
<div class="col-6">
<p>
<span v-if="record.user.name">{{ record.user.name }}</span>
<span v-else class="font-italic">Intet navn</span>
</p>
<p>
<span v-if="record.user.birthday">{{ record.user.birthday }}</span>
<span v-else class="font-italic">Ingen fødselsdato</span>
</p>
<p>
<span v-if="record.user.email">{{ record.user.email }}</span>
<span v-else class="font-italic">Ingen email</span>
</p>
<p>
<span v-if="record.user.phone">{{ record.user.phone }}</span>
<span v-else class="font-italic">Intet telefonnummer</span>
</p>
<p>
<span v-if="record.user.role_id = 1">Elev</span>
<span v-else-if="record.user.role_id = 2">Kørelærer</span>
<span v-else-if="record.user.role_id = 3">Køreskoleadministrator</span>
<span v-else-if="record.user.role_id = 4">MitKørekort - Support</span>
<span v-else-if="record.user.role_id = 5">MitKørekort - Superbruger</span>
</p>
<p>
<span v-if="record.user.address_1">{{ record.user.address_1 }}</span>
<span v-else class="font-italic">Ingen addresse</span>
</p>
<p>
<span v-if="record.user.zip_code">{{ record.user.zip_code }}</span>
<span v-else class="font-italic">Intet postnummer</span>
</p>
<p>
<span v-if="record.user.country">{{ record.user.country }}</span>
<span v-else class="font-italic">Intet land</span>
</p>
</div>
</div>
<button class="btn btn-primary" #click="modalbox = true; modalboxType = 1">Rediger</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="card box-shadow border-0">
<div class="card-header bg-transparent">Ny adgangskode?</div>
<div class="card-body text-center">
<a class="mt-2 btn btn-primary btn-block" href="/nulstil/kodeord">Nulstil min adgangskode</a>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import FormMixin from '../../FormMixin.js';
export default {
mixins: [ FormMixin ],
data() {
return {
record: {},
fetchUrl: 'v1/account/fetch',
data_is_fetched: false,
modalbox: false,
modalboxType: 0,
}
},
mounted() {
console.log('Component mounted.')
this.fetchData()
},
methods: {
fetchData() {
axios.get(this.fetchUrl)
.then(response => (
this.record = response.data
))
.finally( this.data_is_fetched = true)
},
},
}
</script>
The component registration
// Account
// Profile page
Vue.component('page-show-account', require('./pages/account/Show.vue').default);

My issue was that the server had the newest compiled files in "public" and not "public_html".
So there wasn't anything missing or wrong in the code itself, but the server didn't use the correct files.

Can you drop your code?
I guess maybe you have a problem with registering the component, maybe you did not type correct path, or etc.
My advice is to read carefully
https://v2.vuejs.org/v2/guide/components-registration.html

Related

vue js in laravel..Computed method is undefined

I tried to get data but it says computed method is undefined in vue dev tool
my methods are
<script>
export default{
name:"about",
mounted(){
this.$store.dispatch('getFrontAbouts');
},
computed:{
about(){
return this.$store.getters.about;
}
},
}
</script>
store2.js file where i get those data by axios call
export default{
state: {
aboutData:[],
},
getters:{
about(state){
return state.aboutData;
},
},
actions:{
getFrontAbouts(data){
axios.get("get-front-about").then((response)=>{
data.commit('about',response.data.about);
}).catch((error)=>{
})
},
},
mutations: {
about(state,data){
return state.aboutData = data;
},
}
}
my controller file where i am fetching data
public function about(){
$about = About::where('publication_status',1)->orderBy('id','ASC')->take(1)->first();
return response()->json(['about',$about],200);
}
here is my vue component where computed about method is being executed
<div class="row topmargin bottommargin gutter-lg-50 align-items-center">
<div class="col-lg-12 p-lg-5">
<div class="heading-block border-bottom-0 mb-0">
<h2 class="nott font-weight-semibold mb-4 text-secondary" style="color: #1ABC9C;">Our Story</h2>
<p v-if="about">{{about.about_us}}</p>
<div class="row">
<div class="col-6 col-sm-6 mb-4">
<div class="counter color font-weight-semibold"><span data-from="1" data-to="3" data-refresh-interval="2" data-speed="600"></span>+</div>
<h5 class="mt-0 font-weight-medium">Branches</h5>
</div>
<div class="col-6 col-sm-6 mb-4">
<div class="counter color font-weight-semibold"><span data-from="1" data-to="37" data-refresh-interval="11" data-speed="900"></span>+</div>
<h5 class="mt-0 font-weight-medium">Single Studios</h5>
</div>
<div class="col-6 col-sm-6 mb-4">
<div class="counter color font-weight-semibold"><span data-from="1" data-to="21" data-refresh-interval="3" data-speed="1000"></span>+</div>
<h5 class="mt-0 font-weight-medium">Events per Month</h5>
</div>
<div class="col-6 col-sm-6 mb-4">
<div class="counter color font-weight-semibold"><span data-from="100" data-to="4500" data-refresh-interval="100" data-speed="1500"></span>+</div>
<h5 class="mt-0 font-weight-medium">Active Members</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="row justify-content-center topmargin-sm">
<div class="col-md-5 offset-md-1">
<h3 class="text-dark"><i class="icon-line-circle-check color mr-1 position-relative" style="top: 2px;color: #1ABC9C;"></i> Why do you choose DreamsEye?</h3>
<p v-if="about">{{about.choice_us}}</p>
</div>
<div class="col-md-5 pl-md-5">
<h3 class="text-dark"><i class="icon-line-circle-check color mr-1 position-relative" style="top: 2px;color: #1ABC9C;"></i> Our Address</h3>
<p v-if="about">{{about.address}}</p>
</div>
<div class="clear"></div>
</div>
</div>
here is my vue dev tool screenshot
enter image description here
here is my response screenshot
enter image description here
You are accessing the computed property using about, but the computed property is defined as About.
JavaScript is case sensitive.
First it is a typo change this About() to thisabout() . it is because vuejs is case sensitive.
Second as you are geting about in array type you need to loop through it to get the data of each column so try this
<div v-for="abt in about" :key="abt.id"class="heading-block border-bottom-0 mb-0">
<h2 class="nott font-weight-semibold mb-4 text-secondary" style="color: #1ABC9C;">Our Story</h2>
<p v-if="about">{{abt.about_us}}</p>
you guys just look at my methods and vue component...But the actual problem was in my controller where...
$about = About::where('publication_status',1)->orderBy('id','ASC')->take(1)->first();
return response()->json(['about',$about],200);
to
$about = About::where('publication_status',1)->orderBy('id','ASC')->take(1)->first();
return response()->json(['about'=>$about],200);

Laravel - How to Pass a variable to controller and to url name of route

I need to pass variable to controller of details of Boat and show it in the url.
This is the blade view where I download a list of boats available:
#foreach($Boats as $boat)
<article class="box">
<figure class="col-sm-4">
<a title="" href="{{asset('frontend')}}/ajax/cruise-slideshow-popup.html" class="hover-effect popup-gallery"><img width="270" height="160" alt="" src="{{ json_decode($boat->images, true)['url']}}"></a>
</figure>
<div class="details col-sm-8">
<div class="clearfix">
<h4 class="box-title pull-left">{{$boat->name}}<small>{{$boat->id}}</small></h4>
<span class="price pull-right"><small>from</small>$239</span>
</div>
<div class="character clearfix">
<div class="col-xs-3 cruise-logo">
<img src="http://placehold.it/110x25" alt="" />
</div>
<div class="col-xs-4 date">
<i class="soap-icon-clock yellow-color"></i>
<div>
<span class="skin-color">Date</span><br>{{$boat->year}}
</div>
</div>
<div class="col-xs-5 departure">
<i class="soap-icon-departure yellow-color"></i>
<div>
<span class="skin-color">Departure</span><br>{{$boat->homeBase}}
</div>
</div>
</div>
<div class="clearfix">
<div class="review pull-left">
<div class="five-stars-container">
<span class="five-stars" style="width: 60%;"></span>
</div>
<span>270 reviews</span>
</div>
select cruise
</div>
</div>
</article>
#endforeach
This is route route.php file to translate url:
return [
"login" => "login",
"register" => "register",
"listBoats" => "boats",
"contact" => "contact",
"detailedBoat" => "DetailBoat/{id}",
];
web.php :
Route::get(LaravelLocalization::transRoute('routes.detailedBoat'),('DetailedBoat'), function (\App\Boat $id) {
return $id;
});
DetailsBoat Controller:
public function __invoke($id)
{
echo $id;
return view('frontendViews.detailedBoat');
}
Result should be
http://localhost:8000/en/boats/{id}
The strange thing is that routes work perfectly based on app.php 'locale' setting, if i have 'en' i get http://localhost:8000/en/DetailBoat/1` and http://booking:8888/it/DettaglioBarca/%7Bid%7D switching language;
viceversa if have ['it'] on app.php i'm getting http://booking:8888/it/DettaglioBarca/1 and http://booking:8888/en/DetailBoat/%7Bid%7D in english.
Thank you

I am creating a web application using Laravel, vue-router and MySQL database

I am creating a web application using Laravel, vue-router and MySQL database. I created a dashboard component and a bank component. When I run my project, the Dashboard component loads with all the CSS and javascript. But when I change to the Bank component, CSS may be loaded but some javascript cannot run. After refreshing the entire bank component page, the previously non-running javascript then executes.
this is my web.php file
<?php
Route::get('/{any}', function () {
return view('welcome');
})->where('any', '.*');
Auth::routes();
Route::get('/home', 'HomeController#index')->name('home');
This is my index.js file
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Dashboard from "./components/Dashboard";
import Bank from "./components/Bank";
import Demo from "./components/Demo";
import Company from "./components/Company";
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'dashboard',
component: Dashboard,
},
{
path: '/bank',
name: 'bank',
component: Bank,
},
{
path: '/company',
name: 'company',
component: Company
},
],
})
const app = new Vue({
el: '#app',
router,
});
This is my Dashboard Component file
<template>
<div class="container-fluid">
<!-- Page-Title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-sm-6">
<h4 class="page-title">Dashboard</h4>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-right">
<li class="breadcrumb-item">Stexo</li>
<li class="breadcrumb-item active">Dashboard</li>
</ol>
</div>
</div>
<!-- end row -->
</div>
<div class="row">
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-heading p-4">
<div class="mini-stat-icon float-right">
<i class="mdi mdi-cube-outline bg-primary text-white"></i>
</div>
<div>
<h5 class="font-16">Active Sessions</h5>
</div>
<h3 class="mt-4">43,225</h3>
<div class="progress mt-4" style="height: 4px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted mt-2 mb-0">Previous period<span class="float-right">75%</span></p>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-heading p-4">
<div class="mini-stat-icon float-right">
<i class="mdi mdi-briefcase-check bg-success text-white"></i>
</div>
<div>
<h5 class="font-16">Total Revenue</h5>
</div>
<h3 class="mt-4">$73,265</h3>
<div class="progress mt-4" style="height: 4px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 88%" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted mt-2 mb-0">Previous period<span class="float-right">88%</span></p>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-heading p-4">
<div class="mini-stat-icon float-right">
<i class="mdi mdi-tag-text-outline bg-warning text-white"></i>
</div>
<div>
<h5 class="font-16">Average Price</h5>
</div>
<h3 class="mt-4">447</h3>
<div class="progress mt-4" style="height: 4px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 68%" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted mt-2 mb-0">Previous period<span class="float-right">68%</span></p>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-heading p-4">
<div class="mini-stat-icon float-right">
<i class="mdi mdi-buffer bg-danger text-white"></i>
</div>
<div>
<h5 class="font-16">Add to Card</h5>
</div>
<h3 class="mt-4">86%</h3>
<div class="progress mt-4" style="height: 4px;">
<div class="progress-bar bg-danger" role="progressbar" style="width: 82%" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted mt-2 mb-0">Previous period<span class="float-right">82%</span></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-8">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Area Chart</h4>
<div id="morris-area-example" class="morris-charts morris-chart-height"></div>
</div>
</div>
</div>
<!-- end col -->
<div class="col-xl-4">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Donut Chart</h4>
<div id="morris-donut-example" class="morris-charts morris-chart-height"></div>
</div>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-xl-4">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Friends Suggestions</h4>
<div class="friends-suggestions">
<a href="#" class="friends-suggestions-list">
<div class="border-bottom position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-2.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">Ralph Ramirez</h5>
<p class="text-muted">3 Friend suggest</p>
</div>
</div>
</a>
<a href="#" class="friends-suggestions-list">
<div class="border-bottom position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-3.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">Patrick Beeler</h5>
<p class="text-muted">17 Friend suggest</p>
</div>
</div>
</a>
<a href="#" class="friends-suggestions-list">
<div class="border-bottom position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-4.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">Victor Zamora</h5>
<p class="text-muted">12 Friend suggest</p>
</div>
</div>
</a>
<a href="#" class="friends-suggestions-list">
<div class="border-bottom position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-5.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">Bryan Lacy</h5>
<p class="text-muted">18 Friend suggest</p>
</div>
</div>
</a>
<a href="#" class="friends-suggestions-list">
<div class="position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-6.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">James Sorrells</h5>
<p class="text-muted mb-1">6 Friend suggest</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Sales Analytics</h4>
<div id="morris-line-example" class="morris-chart" style="height: 360px"></div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Recent Activity</h4>
<ol class="activity-feed mb-0">
<li class="feed-item">
<div class="feed-item-list">
<p class="text-muted mb-1">Now</p>
<p class="font-15 mt-0 mb-0">Andrei Coman posted a new article: <b class="text-primary">Forget UX Rowland</b></p>
</div>
</li>
<li class="feed-item">
<p class="text-muted mb-1">Yesterday</p>
<p class="font-15 mt-0 mb-0">Andrei Coman posted a new article: <b class="text-primary">Designer Alex</b></p>
</li>
<li class="feed-item">
<p class="text-muted mb-1">2:30PM</p>
<p class="font-15 mt-0 mb-0">Zack Wetass, <b class="text-primary"> Developer Moreno</b></p>
</li>
<li class="feed-item pb-1">
<p class="text-muted mb-1">12:48 PM</p>
<p class="font-15 mt-0 mb-2">Zack Wetass, <b class="text-primary">UX Murphy</b></p>
</li>
</ol>
</div>
</div>
</div>
</div>
<!-- START ROW -->
<div class="row">
<div class="col-xl-12">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Active Deals</h4>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Status</th>
<th scope="col">Amount</th>
<th scope="col">Contact</th>
<th scope="col">Location</th>
<th scope="col" colspan="2">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Philip Smead</td>
<td><span class="badge badge-success">Delivered</span></td>
<td>$9,420,000</td>
<td>
<div>
<img src="front/images/users/user-2.jpg" alt="" class="thumb-md rounded-circle mr-2"> Philip Smead
</div>
</td>
<td>Houston, TX 77074</td>
<td>15/1/2018</td>
<td>
<div>
Edit
</div>
</td>
</tr>
<tr>
<td>Brent Shipley</td>
<td><span class="badge badge-warning">Pending</span></td>
<td>$3,120,000</td>
<td>
<div>
<img src="front/images/users/user-3.jpg" alt="" class="thumb-md rounded-circle mr-2"> Brent Shipley
</div>
</td>
<td>Oakland, CA 94612</td>
<td>16/1/2019</td>
<td>
<div>
Edit
</div>
</td>
</tr>
<tr>
<td>Robert Sitton</td>
<td><span class="badge badge-success">Delivered</span></td>
<td>$6,360,000</td>
<td>
<div>
<img src="front/images/users/user-4.jpg" alt="" class="thumb-md rounded-circle mr-2"> Robert Sitton
</div>
</td>
<td>Hebron, ME 04238</td>
<td>17/1/2019</td>
<td>
<div>
Edit
</div>
</td>
</tr>
<tr>
<td>Alberto Jackson</td>
<td><span class="badge badge-danger">Cancel</span></td>
<td>$5,200,000</td>
<td>
<div>
<img src="front/images/users/user-5.jpg" alt="" class="thumb-md rounded-circle mr-2"> Alberto Jackson
</div>
</td>
<td>Salinas, CA 93901</td>
<td>18/1/2019</td>
<td>
<div>
Edit
</div>
</td>
</tr>
<tr>
<td>David Sanchez</td>
<td><span class="badge badge-success">Delivered</span></td>
<td>$7,250,000</td>
<td>
<div>
<img src="front/images/users/user-6.jpg" alt="" class="thumb-md rounded-circle mr-2"> David Sanchez
</div>
</td>
<td>Cincinnati, OH 45202</td>
<td>19/1/2019</td>
<td>
<div>
Edit
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- END ROW -->
</div>
</template>
<script>
export default {}
</script>
This is my Bank component file
<template>
<div class="container-fluid">
<!-- Page-Title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-sm-6">
<h4 class="page-title">Add Bank</h4>
</div>
<!-- <div class="col-sm-6">-->
<!-- <ol class="breadcrumb float-right">-->
<!-- <li class="breadcrumb-item"><router-link :to="{ name: 'dashboard' }">Dashboard</router-link></li>-->
<!-- <li class="breadcrumb-item"><router-link :to="{ name: 'bank' }">Master</router-link></li>-->
<!-- <li class="breadcrumb-item"><router-link :to="{ name: 'bank' }">Bank</router-link></li>-->
<!-- <li class="breadcrumb-item active">Add Bank</li>-->
<!-- </ol>-->
<!-- </div>-->
</div>
<!-- end row -->
</div>
<!-- Starting of Button Section-->
<div class="row">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body">
<div class="button-items">
<button type="button" data-toggle="modal" data-target="#elegantModalForm" class="btn btn-outline-primary waves-effect waves-light">Add Bank</button>
</div>
</div>
</div>
</div>
</div>
<!-- Starting of Modal -->
<!-- Modal -->
<div class="modal fade" id="elegantModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-notify modal-warning modal-lg" role="document">
<!--Content-->
<div class="modal-content form-elegant">
<!--Header-->
<div class="modal-header text-center">
<h3 class="modal-title w-100 font-weight-bold py-2 white-text" id="myModalLabel"><strong>Add Bank Information</strong></h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="container-fluid">
<form class="form-group">
<div class="row">
<div class="col-md-12 md-form">
<input type="text" class="form-control">
<label>Name of Bank *</label>
</div>
</div>
<div class="row">
<div class="col-md-12 md-form">
<textarea type="text" class="form-control md-textarea"></textarea>
<label>Address / Branch *</label>
</div>
</div>
<div class="row">
<div class="col-md-6 md-form">
<select class="browser-default custom-select">
<option value="">Account Holder Name</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="4">Poland</option>
<option value="5">Japan</option>
</select>
</div>
<div class="col-md-6 md-form">
<input type="text" class="form-control">
<label>Bank Account *</label>
</div>
</div>
<div class="row">
<div class="col-md-6 md-form">
<input type="text" class="form-control">
<label>Bank Routing *</label>
</div>
<div class="col-md-6 md-form">
<input type="date" class="form-control datepicker">
<label>Opening Bal Date * </label>
</div>
</div>
<div class="row">
<div class="col-md-6 md-form">
<input type="text" class="form-control">
<label>Opening Balance *</label>
</div>
<div class="col-md-6 md-form">
<input type="text" class="form-control datepicker">
<label>Current Cheque no * </label>
</div>
</div>
</form>
</div>
</div>
<!--Footer-->
<div class="modal-footer mx-5 pt-3 mb-1">
<button class="btn btn-outline-danger" data-dismiss="modal">Close</button>
<button class="btn blue-gradient">Add</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Modal -->
<!-- Ending of Modal -->
<!--Ending of Button Section-->
</div>
<!-- end container-fluid -->
</template>
<script>
export default {}
</script>

Laravel ajax store request errormessage, data append to view

I'm new to ajax and I have two little problems.
With my code I can write the data in the database. I get no error messages and the data are not synonymous directly loaded into the view.
how can I load the data directly into the view without reload the page?
if the privacy is 1, the code should be displayed in the right column, and if the privacy is 0, the code should be displayed in the left column.
How can I output the error messages with my errormessage code?
view
<div id="content" class="dashboard padding-10">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<a data-toggle="modal" data-target=".todolist-create-modal" class="btn btn-success btn-block btn-sm margin-bottom-10">Neue Liste erstellen</a>
</div>
<div class="col-md-6">
<div id="panel-misc-portlet-l3" class="panel panel-default text-center">
<div class="panel-heading nohover">
<span class="elipsis">
<strong>Private Tasks</strong>
</span>
</div>
</div>
<div class="alert alert-danger margin-bottom-30 {{ $todolistpublic->count() ? 'hidden' : '' }}">
Es wurden keine <strong>Einträge</strong> gefunden.
</div>
#foreach ($todolistpublic as $list)
<div id="todo-list-{{$list->id}}" class="panel panel-default panel-primary margin-bottom-0">
<div class="panel-heading panel-pointer">
<span class="elipsis"><!-- panel title -->
<strong>{{ $list->title }}</strong> <span class="label label-info white">0</span>
</span>
<ul class="options pull-right relative list-unstyled hover-visible">
<li><a data-toggle="modal" data-target=".task-modal" class="btn btn-success btn-xs white hover-hidden">
<i class="fa fa-plus"></i> Erstellen
</a>
</li>
<li><a data-toggle="modal" data-target=".todolist-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-info btn-xs white hover-hidden">
<i class="fa fa-edit"></i> Bearbeiten
</a>
</li>
<li><a data-toggle="modal" data-target=".todolist-delete-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-danger btn-xs white hover-hidden">
<i class="fa fa-times"></i> Löschen
</a>
</li>
<li></li>
</ul>
</div>
<div class="panel-body">
<div class="slimscroll" data-always-visible="false" data-rail-visible="false" data-railOpacity="1" data-height="100">
{{ $list->description }}
</div>
</div>
</div>
#endforeach
<div class="panel-footer mtm-10">
<span id="todo-list-counter-public">{{ $todolistpublic->count() }}</span> <span>{{ $todolistpublic->count() > 1? 'Listen' : 'Liste' }}</span>
</div>
</div>
<div class="col-md-6">
<div id="panel-misc-portlet-l3" class="panel panel-default text-center">
<div class="panel-heading nohover">
<span class="elipsis">
<strong>Öffentliche Tasks</strong>
</span>
</div>
</div>
<div class="alert alert-danger margin-bottom-30 {{ $todolistprivate->count() ? 'hidden' : '' }}">
Es wurden keine <strong>Einträge</strong> gefunden.
</div>
#foreach ($todolistprivate as $list)
<div id="todo-list-{{$list->id}}" class="panel panel-default panel-primary margin-bottom-0">
<div class="panel-heading panel-pointer">
<span class="elipsis"><!-- panel title -->
<strong>{{ $list->title }}</strong> <span class="label label-info white">0</span>
</span>
<ul class="options pull-right relative list-unstyled hover-visible">
<li><a data-toggle="modal" data-target=".task-modal" class="btn btn-success btn-xs white hover-hidden"><i class="fa fa-plus"></i> Erstellen</a></li>
<li><a data-toggle="modal" data-target=".todolist-modal" class="btn btn-info btn-xs white hover-hidden"><i class="fa fa-edit"></i> Bearbeiten</a></li>
<li><i class="fa fa-times"></i> Löschen</li>
<li></li>
</ul>
</div>
<div class="panel-body">
<div class="slimscroll" data-always-visible="false" data-rail-visible="false" data-railOpacity="1" data-height="100">
{{ $list->description }}
</div>
</div>
</div>
#endforeach
<div class="panel-footer mtm-10">
<span id="todo-list-counter-private">{{ $todolistprivate->count() }}</span> <span>{{ $todolistprivate->count() > 1? 'Listen' : 'Liste' }}</span>
</div>
</div>
#include('elements.addTodoList')
#include('elements.createTodoList')
#include('elements.addTask')
</div>
</div>
$(document).ready(function () {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$('#add-todo-list').click(function(e) {
e.preventDefault();
var _token = $("input[name='_token']").val(); // get csrf field.
var title = $("input[name='title']").val();
var description = $("textarea[name='description']").val();
var privacy = $("select[name='privacy']").val();
$.ajax({
url:'{{ route('todolists.store') }}',
type: 'POST',
data: {_token:_token, title:title, description:description, privacy:privacy},
success: function (data) {
console.log(data);
}
});
});
});
Controller
public function store(Request $request)
{
$validator = Validator::make($request->all(), [
'title' => 'required|min:5',
'description' => 'required|min:10',
'privacy' => 'required|integer'
]);
$attributeNames = array(
'title' => 'Title',
'description' => 'Description',
);
$validator->setAttributeNames($attributeNames);
//Redirect back if validation fails
if($validator->fails()) {
return response()->json(['error'=>$validator->errors()->all()]);
}
else{
$todolists = new Todolists;
$todolists->admin_id = auth::user();
$todolists->title = $request->title;
$todolists->description = $request->description;
$todolists->privacy = $request->privacy;
$todolists->save();
return response()->json(['success'=>'Your enquiry has been successfully submitted!']);
}
}
modal
<div class="modal fade todolist-create-modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Erstelle eine neue Liste</h4>
</div>
<div class="modal-body">
<form action="{{ route('todolists.store') }}" method="post">
{{ csrf_field() }}
<div class="form-group">
<label for="" class="control-label">Titelname</label>
<div class="fancy-form">
<i class="fa fa-header"></i>
<input id="title" name="title" type="text" class="form-control input-lg" placeholder="Titel">
</div>
</div>
<div class="form-group">
<label for="" class="control-label">Beschreibung</label>
<div class="fancy-form">
<textarea id="description" name="description" rows="2" class="form-control" placeholder="Beschreibe deine Aufgabe"></textarea>
<i class="fa fa-comments"><!-- icon --></i>
</div>
</div>
<div class="form-group">
<label for="" class="control-label">Privatsphäre</label>
<div class="fancy-form fancy-form-select">
<select id="privacy" name="privacy" class="form-control">
<option selected value="0">Öffentlich</option>
<option value="1">Privat</option>
</select>
<i class="fancy-arrow"></i>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" id="add-todo-list">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
errormessages
#if (count($errors) > 0)
<div class="toastr-notify"></div>
#foreach ($errors -> all() as $e)
<script type="text/javascript">
_toastr("{{$e}}","top-right","error",false);
</script>
#endforeach
#endif
#if (session('fail'))
<div class="toastr-notify"></div>
<script type="text/javascript">
_toastr("{{ session('fail') }}","top-full-width","warning",false);
</script>
#endif
#if (session('status'))
<div class="toastr-notify"></div>
<script type="text/javascript">
_toastr("{{ session('status') }}","top-full-width","info",false);
</script>
#endif
#if (session('success'))
<div class="btn btn-info toastr-notify"></div>
<script type="text/javascript">
_toastr("{{ session('success') }}","top-full-width","success", false);
</script>
#endif
#if (session('error'))
<div class="toastr-notify"></div>
<script type="text/javascript">
_toastr("{{ session('error') }}","top-full-width","error",false);
</script>
#endif
I believe you have a typo in your ajax backend code; this line to be specific:
$todolists->admin_id = auth::user();
This should be:
$todolists->admin_id = auth()->user()->id;
The typo is generating a Throwable error, which is getting caught by the laravel exception handler and it's detecting that the code is being executed under a ajax request and hence returning a 500 internal server error.

Vue.js is not working when its in seperate file?

When i put my script code in seperate file in js then my component is not working, only when i directly write code in view. Any suggestion why is that happening?
https://jsfiddle.net/coligo/txpy7ug4/
<div id="app">
<div class="container-fluid">
<ul class="list-group">
<post v-for="comment in comments" :post="comment"></post>
</ul>
<div id="comment-box">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter a comment..." v-model="comment" #keyup.enter="postComment">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" #click="postComment">Submit</button>
</span>
</div>
</div>
</div>
</div>
<template id="post-template">
<li class="list-group-item">
<i class="glyphicon glyphicon-chevron-up" #click="upvote" :class="{disabled: upvoted}"></i>
<span class="label label-primary">#{{ votes }}</span>
<i class="glyphicon glyphicon-chevron-down" #click="downvote" :class="{disabled: downvoted}"></i>
<a>#{{ post.title }}</a>
</li>
</template>
If your HTML is in different file than your JS code, You have to require that in your vue instance like explained here:
component.js
module.export = {
template: require('./templates/template.html'),
data: function(){
return {
text: "Hello World!"
};
}
};
template.html
<h1>{{ text }}<h1>

Resources