I'm new to Vue, I have a WebPage component(movie song list) that receives a movie_id from the page route parameters (through this.$store.state.route.params.movieId), then fetches the actual user song data from the database on the server using a command: this.movie = (await MoviesService.show(movieId)).data, the show function is to find the params in db by id and send the content back to front end.
My question is that whenever I click on the view button, the website will link to the certain id page with a basic frame, but it can't get the content in the movie song list web page. The error demo The snapshot in postman
The error shows in the console is:
[Vue warn]: Error in mounted hook (Promise/async): "Error: Request failed with status code 500" found in ---> at src/components/ViewMovie.vue at src/App.vue
ViewMovie.vue:
<template>
<panel title= "Movies theme song list">
<div class="movie-title">
{{movie.title}}
</div>
<div class="movie-artist">
{{movie.artist}}
</div>
<div class="movie-album">
{{movie.album}}
</div>
</panel>
</template>
<script>
import MoviesService from '@/services/MoviesService'
import Panel from '@/components/Panel'
export default {
async mounted () {
const movieId = this.$store.state.route.params.movieId
this.movie = (await MoviesService.show(movieId)).data
},
data () {
return {
movie: {}
}
},
components: {
Panel
}
}
</script>
MoviesController.js:
const {Movie} = require('../models')
module.exports = {
async show (req, res) {
try {
const movie = await Movie.findById(req.params.movieId)
res.send(movie)
} catch (err) {
res.status(500).send({
error: 'An error has occured trying to fetch the movie'
})
}
},
async post (req, res) {
try {
const movie = await Movie.create(req.body)
res.send(movie)
} catch (err) {
res.status(500).send({
error: 'An error has occured trying to create the movie'
})
}
}
}
MoviesService.js:
import Api from '@/services/Api'
export default {
index () {
return Api().get('movies')
},
show (movieId) {
return Api().get(`movies/${movieId}`)
},
post (movie) {
return Api().post('movies', movie)
}
}