Unable to insert data in the database in laravel projet with vuejs and vuetify - laravel

Question

I have setup a laravel project with Vuejs and vuetify to insert data in the database. But for some reason I not able to insert data in the database. When I compile my code I can see no error but when I inspect my code I can see error in my console saying "Internal service error" . I assuming that the error may be in my controller.
Here are m code:
Location.vue
<template>
<v-app id="inspire">
<v-data-table
item-key="code"
class="elevation-1"
color="error"
:loading = "loading"
loading-text="Loading... Please wait"
:headers="headers"
:options.sync="options"
:server-items-length="locations.total"
:items="locations.data"
show-select
#input="selectAll"
:footer-props="{
itemsPerPageOptions: [5,10,15],
itemsPerPageText: 'Roles Per Page',
'show-current-page': true,
'show-first-last-page': true
}"
>
<template v-slot:top>
<v-toolbar flat color="dark">
<v-toolbar-title>My Stage</v-toolbar-title>
<v-divider
class="mx-4"
inset
vertical
></v-divider>
<v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{ on }">
<v-btn color="error" dark class="mb-2" v-on="on">Add New Stage</v-btn>
<v-btn color="error" dark class="mb-2 mr-2" #click="deleteAll">Delete</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12" sm="12" >
<v-text-field autofocus color="error" v-model="editedItem.code" label="Code"></v-text-field>
</v-col>
<v-col cols="12" sm="12" >
<v-text-field autofocus color="error" v-model="editedItem.name" label="Name"></v-text-field>
</v-col>
<v-col cols="12" sm="12" >
<v-text-field autofocus color="error" v-model="editedItem.description" label="Description"></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="error darken-1" text #click="close">Cancel</v-btn>
<v-btn color="error darken-1" text #click="save">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
<v-row>
<v-col cols="12">
<v-text-field #input="searchIt" label="Search..." class="mx-4" ></v-text-field>
</v-col>
</v-row>
</template>
<template v-slot:item.action="{ item }">
<v-icon
small
class="mr-2"
#click="editItem(item)"
>
mdi-content-save-edit-outline
</v-icon>
<v-icon
small
#click="deleteItem(item)"
>
mdi-delete
</v-icon>
</template>
<template v-slot:no-data>
<v-btn color="error" #click="initialize">Reset</v-btn>
</template>
</v-data-table>
<v-snackbar v-model="snackbar" >
{{text}}
<v-btn
color="error"
text
#click="snackbar = false"
>
Close
</v-btn>
</v-snackbar>
</v-app>
</template>
<script>
export default {
data: () => ({
dialog: false,
loading: false,
snackbar: false,
selected: [],
text: '',
options:{
itemsPerPage: 5,
sortBy:['id'],
sortDesc: [false]
},
headers: [
{text: '#',align: 'left', sortable: false,value: 'id'},
{ text: 'Code', value: 'code' },
{ text: 'Name', value: 'name' },
{ text: 'Description', value: 'description' },
{ text: 'Actions', value: 'action'},
],
locations: [],
editedIndex: -1,
editedItem: {
id: '',
code: '',
name: '',
description: '',
},
defaultItem: {
id: '',
code: '',
name: '',
description: '',
},
}),
computed: {
formTitle () {
return this.editedIndex === -1 ? 'New Stage' : 'Edit Stage'
},
},
watch: {
dialog (val) {
val || this.close()
},
options:{
handler(e){
console.dir(e);
const sortBy = e.sortBy.length>0 ? e.sortBy[0].trim() : 'id';
const orderBy = e.sortDesc[0] ? 'desc' : 'asc';
axios.get(`/api/locations`,{params:{'page':e.page, 'per_page':e.itemsPerPage, 'sort_by': sortBy, 'order_by': orderBy}})
.then(res => {
this.locations = res.data.locations
})
},
deep: true
}
},
created () {
this.initialize()
},
methods: {
selectAll(e){
this.selected = [];
if(e.length > 0){
this.selected = e.map(val => val.id)
}
},
deleteAll(){
let decide = confirm('Are you sure you want to delete these items?')
if(decide){
axios.post('/api/locations/delete', {'locations': this.selected})
.then(res => {
this.text = "Records Deleted Successfully!";
this.selected.map(val => {
const index = this.locations.data.indexOf(val)
this.locations.data.splice(index, 1)
})
this.snackbar = true
}).catch(err => {
console.log(err.response)
this.text = "Error Deleting Record"
this.snackbar=true
})
}
},
searchIt(e){
if(e.length > 3){
axios.get(`/api/locations/${e}`)
.then(res => this.locations = res.data.locations)
.catch(err => console.dir(err.response))
}
if(e.length<=0){
axios.get(`/api/locations`)
.then(res => this.locations = res.data.locations)
.catch(err => console.dir(err.response))
}
},
paginate(e){
const sortBy = e.sortBy.length>0 ? e.sortBy[0].trim() : 'code';
const orderBy = e.sortDesc[0] ? 'desc' : 'asc';
axios.get(`/api/locations`,{params:{'page':e.page, 'per_page':e.itemsPerPage, 'sort_by': sortBy, 'order_by': orderBy}})
.then(res => {
this.locations = res.data.locations
})
},
initialize () {
// Add a request interceptor
axios.interceptors.request.use((config) => {
this.loading = true;
return config;
}, (error) => {
this.loading = false;
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use( (response) => {
this.loading = false;
return response;
}, (error) => {
this.loading = false
return Promise.reject(error);
});
},
editItem (item) {
this.editedIndex = this.locations.data.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialog = true
},
deleteItem (item) {
const index = this.locations.data.indexOf(item)
let decide = confirm('Are you sure you want to delete this item?')
if(decide){
axios.delete('/api/locations/'+item.id)
.then(res => {
this.text = "Record Deleted Successfully!";
this.snackbar = true
this.locations.data.splice(index, 1)
}).catch(err => {
console.log(err.response)
this.text = "Error Deleting Record"
this.snackbar=true
})
}
},
close () {
this.dialog = false
setTimeout(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
}, 300)
},
save () {
if (this.editedIndex > -1) {
const index = this.editedIndex
axios.put('/api/locations/'+this.editedItem.id, {'code': this.editedItem.code, 'name': this.editedItem.name, 'description': this.editedItem.description})
.then(res => {
this.text = "Record Updated Successfully!";
this.snackbar = true;
Object.assign(this.locations.data[index], res.data.location)
})
.catch(err => {
console.log(err.response)
this.text = "Error Updating Record"
this.snackbar=true
})
// Object.assign(this.locations[this.editedIndex], this.editedItem)
} else {
axios.post('/api/locations',{'code': this.editedItem.code, 'name': this.editedItem.name, 'description': this.editedItem.description})
.then(res => {
this.text = "Record Added Successfully!";
this.snackbar=true;
this.locations.data.push(res.data.location)
})
.catch(err => {
console.dir(err.response)
this.text = "Error Inserting Record"
this.snackbar=true
})
}
this.close()
},
},
}
</script>
<style scoped></style>
Location.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Location extends Model
{
protected $guarded = [];
}
LocationController.php
<?php
namespace App\Http\Controllers\Api;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Location;
class LocationController extends Controller
{
public function index(Request $request)
{
$per_page = $request->per_page ? $request->per_page : 5;
$sort_by = $request->sort_by;
$order_by = $request->order_by;
return response()->json(['locations' => Location::orderBy($sort_by, $order_by)->paginate($per_page)],200);
}
public function store(Request $request)
{
$location= Location::create([
'code' =>$request->code
'name' =>$request->name
'description' =>$request->description
]);
return response()->json(['location'=>$location],200);
}
public function show($id)
{
$locations = Location::where('code', 'name','description''LIKE', "%$id%")->paginate();
return response()->json(['locations' => $locations],200);
}
public function update(Request $request, $id)
{
$location = Location::find($id);
$location->code = $request->code;
$location->name = $request->name;
$location->description = $request->description;
$location->save();
return response()->json(['location'=>$location], 200);
}
public function destroy($id)
{
$location = Location::find($id)->delete();
return response()->json(['location'=>$location],200);
}
public function deleteAll(Request $request){
Location::whereIn('id', $request->locations)->delete();
return response()->json(['message', 'Records Deleted Successfully'], 200);
}
}

Answer 1

yeah, the issue in your LocationController.php file, you missed commas in Location::create . Also, show function has a problem. notice carefully.
<?php
namespace App\Http\Controllers\Api;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Location;
class LocationController extends Controller
{
public function index(Request $request)
{
$per_page = $request->per_page ? $request->per_page : 5;
$sort_by = $request->sort_by;
$order_by = $request->order_by;
return response()->json(['locations' => Location::orderBy($sort_by, $order_by)->paginate($per_page)],200);
}
public function store(Request $request)
{
$location= Location::create([
'code' =>$request->code,
'name' =>$request->name,
'description' =>$request->description
]);
return response()->json(['location'=>$location],200);
}
public function show($id)
{
$locations = Location::where('code','LIKE', "%$id%")->orWhere('name','LIKE', "%$id%")->orWhere('description', 'LIKE', "%$id%")->paginate();
return response()->json(['locations' => $locations],200);
}
public function update(Request $request, $id)
{
$location = Location::find($id);
$location->code = $request->code;
$location->name = $request->name;
$location->description = $request->description;
$location->save();
return response()->json(['location'=>$location], 200);
}
public function destroy($id)
{
$location = Location::where('id', $id)->delete();
return response()->json(['location'=>$location],200);
}
public function deleteAll(Request $request){
Location::whereIn('id', $request->locations)->delete();
return response()->json(['message', 'Records Deleted Successfully'], 200);
}
}