pass parameter in URL using vuejs and laravel - laravel

Question

I wanna display data with specefic ID in laravel using vuejs.
I get the ID from the link but it seems that there is no request sent to the controller.
api.php :
<?php
use Illuminate\Http\Request;
Route::middleware('auth:api')->get('/user', function (Request $request) {
return $request->user();
});
Route::resource('user','API\UserController');
Route::resource('departement','API\DepartementController');
Route::resource('specialite','API\SpecialiteController')->parameters(['specialite'=>'id']);
my controller :
public function show($id)
{
$specialite=Specialite::with('dep')->findOrFail($id);
$spec = Specialite::with('dep')->where('id',$specialite)->get();
return $spec;
}
my view :
<script>
export default {
data(){
return{
specialites:{},
form: new Form({
id:'',
name:'',
user_id:'',
bio:''
}),
id:0,
}
},
methods: {
loadspecialite(){
//axios.get('api/user').then(({data})=>(this.enseignants=data.data));
axios.get('api/specialite/'+this.id).then(response=>{this.specialites=response.data;});
},
created() {
this.id=this.$route.params.id;
this.loadspecialite();
Fire.$on('AfterCreate',()=>{
this.loadspecialite();
})
}
}
</script>
Vue-router:
let routes = [
{ path: '/Profile/:id', component: require('./components/a.vue').default },
]
thank you.
hope tou will help me.

Answer 1

Firstly, I don't see how this.id would carry the id from the router as created is not guaranteed to have been fired AFTER the router has routed.
Your loadspecialite should get the value from the currentRoute when called and i think the var is slightly wrong:
let id = this.$router.currentRoute.params.id;
Your route resource should be:
Route::resource('specialite','API\SpecialiteController');
The request uri would be:
axios.get(`/api/specialite/${id}`).then(...)
You can find out the exact uri path for all registered routes in Laravel by using an SSH terminal to run console command: php artisan route:list
This should produce the following:
+--------+-----------+----------------------------------+------------------------+------------------------------------------------------------------------+--------------+
| Domain | Method | URI | Name | Action | Middleware |
+--------+-----------+----------------------------------+------------------------+------------------------------------------------------------------------+--------------+
| | GET|HEAD | api/specialite | api.specialite.index | App\Http\Controllers\API\ApplicationController#index | api,auth:api |
| | POST | api/specialite | api.specialite.store | App\Http\Controllers\API\ApplicationController#store | api,auth:api |
| | GET|HEAD | api/specialite/create | api.specialite.create | App\Http\Controllers\API\ApplicationController#create | api,auth:api |
| | GET|HEAD | api/specialite/{specialite} | api.specialite.show | App\Http\Controllers\API\ApplicationController#show | api,auth:api |
| | PUT|PATCH | api/specialite/{specialite} | api.specialite.update | App\Http\Controllers\API\ApplicationController#update | api,auth:api |
| | DELETE | api/specialite/{specialite} | api.specialite.destroy | App\Http\Controllers\API\ApplicationController#destroy | api,auth:api |
| | GET|HEAD | api/specialite/{specialite}/edit | api.specialite.edit | App\Http\Controllers\API\ApplicationController#edit | api,auth:api |
P.S. there is no need to create a form object if you are not sending any attached files, Laravel and axios will revert to use JSON by default with ajax requests.
Laravel will return JSON object by default in response to a JSON ajax call direct from a resource on your controller:
function show($id) {
return Specialite::findOrFail($id);
}
Fail will return a 400+ header that in turn can be handled by axsios .catch
.catch( error => { console.log(error.response.message) } )
Laravel from validation messages would be accessible via:
.catch( error => { console.log(error.response.data.errors) } )
Axios will post an object/array as a JSON request:
data() {
return {
form: {
id:'',
name:'',
user_id:'',
bio:''
},
}
}
...
axios.post('/api/specialite',this.form).then(...);

Answer 2

I do believe that the code is functioning fine. It is a formatting error in the vue component object. Basically your created() handler is in the due methods, thus it won't be handled when the created event is done.
// your code snippet where there is an issue
methods: {
loadspecialite(){
//axios.get('api/user').then(({data})=>(this.enseignants=data.data));
axios.get('api/specialite/'+this.id).then(response=>{this.specialites=response.data;});
}, // end of loadspecialite
created() {
this.id=this.$route.params.id;
this.loadspecialite();
Fire.$on('AfterCreate',()=>{
this.loadspecialite();
})
} // end of created
} //end of methods
What you should do is just remove the created() out of methods and also check the syntax of the function again.
const Foo = {
template: '<div>foo</div>'
}
const Bar = {
template: '<div><span> got {{form}}</span></div>',
data() {
return {
specialites: {},
form: 'fetching...',
id: 0,
}
},
methods: {
loadspecialite() {
// test method for getting some data
axios.get('https://httpbin.org/anything/' + this.id)
.then(response => {
this.form = response.data.url;
}).catch(error => {
console.error(error)
})
},
}, // <- this is the end of methods {}
/**
* Created method outside of methods scope
*/
created() {
this.id = this.$route.params.id;
this.loadspecialite();
}
}
// rest is vues demo router stuff
const routes = [{
path: '/foo',
component: Foo
},
{
path: '/bar/:id',
component: Bar
}
]
const router = new VueRouter({
routes // short for `routes: routes`
})
const app = new Vue({
router
}).$mount('#app')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue Routed</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<style>
button {
padding: 0.75rem;
background: #eee;
border: 1px solid #eaeaea;
cursor: pointer;
color: #000
}
button:active {
color: #000;
box-shadow: 0px 2px 6px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<span> Click a button </span>
<router-link to="/foo"><button>Go to Foo</button></router-link>
<router-link to="/bar/3"><button>Go to Where it will get the data</button></router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
</body>
</html>

Answer 3

All thing has set well, just your show method should respond in JSON:
use Illuminate\Http\Response;
function show($id) {
result = Specialite::findOrFail($id);
return response()->json($result,Response::HTTP_OK);
}