cannot find particular movie in a list vue and laravel - laravel

Question

I am trying to get the details of a particular movie in a list of movies but it cannot get the particular id.
here is my Vue component:
<template>
<div>
<el-row :gutter="10">
<el-col :span="6" v-for="movie in movies" v-bind:key="movie">
<el-card shadow="always" :body-style="{ padding: '0px'} ">
<img v-bind:src="movie.cover_photo" class="image">
<div style="padding: 14px;">
<div class="bottom clearfix">
{{movie.title}}
<h4>{{ movie.year }}</h4>
<h4>{{ movie.type }}</h4>
</div>
<div class="block">
<el-rate v-model="value1" :max="10"></el-rate>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
movies: [],
movie: {
id: '',
}
};
},
created() {
this.fetchMovieList();
},
methods: {
fetchMovieList() {
axios.get('/movies').then(response => {
this.movies = response.data;
})
.catch(error => console.log(error))
},
showMovie(id) {
axios.get('/movies/' + id).then((res) => {
if (res.data.status == true) {
this.movie = res.data.movie;
console.log(res.data.movie)
} else {
alert('No Movie founded with this id')
}
}).catch((err) => {
alert('error')
})
}
}
}
</script>
<style scoped>
.image {
width: 100%;
display: block;
}
</style>
my show method:
public function show($id)
{
$movie=Movie::find($id);
if($movie){
return response()->json(['status'=>true,'movie'=>$movie]);
}else{
return response()->json(['status'=>false]);
}
}
and my route:
Route::get('/movies/{id}', 'MoviesController#show');
It cannot find the movie with the particular id. What could be wrong? When I visit the API URL directly on the browser and directly type the route I get the particular movie I want.

Answer 1

Not sure if this would resolve all your issues but you could try the following:
Route::get('/movies/{movie}', 'MoviesController#show');
public function show(Movie $movie)
{
return view('details', ['movie' => $movie]);
}
Also, the naming convention for controllers is to use the model name in its singular form. Your controller should therefore be named MovieController without s.
Another thing, in your view component you should include the movie_id in the url otherwise Laravel has no way to know which movie you're trying to fetch:
...
axios.get('/movies/1')
...