Error in mounted hook (Promise/async) when fetching data from the server

Viewed 7251

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)
  }
}
1 Answers

I can't see your actual movie object in the database so i am going to go partially on assumptions.

findById() is how you are attempting to find the movie. YOUR ID is 1. FindById() expects the data in the _id field that is auto-generated. The _id is something more along the lines of 5d8c369e69ccb034cc31b816

if you change:

await Movie.findById(req.params.movieId)

to

await Movie.findOne({ id: { $eq: req.params.movieId })

change id here to ID if your database object has those letters capitalized.

What do you get? Any change?

might be worth showing a raw object with the whole movie database entry to see what all is in there and help further if i'm on the wrong path...

Related