[Vuejs]-Vue: How pass the data to another component (with database)

by

0👍

You just need to do the below changes in App.vue, when you emit the movie id from MovieTable.vue, you got to send it as props to WatchedForm.vue not as a variable instead as a computed property. Check the below approach

 <movie-table
      :movies="movies"
      @delete:movie="deleteMovie"
      @edit:movie="WatchedMovie"
      @edit2:movie="unWatchedMovie"
  />
  </div>
  <watched-form
      :movieId="getMovieId"
      />

and add a variable called movieId inside data() like

data() {
 return {
  movieId: '',
  ....other variables
 };
}

and in computed

computed: {
 getMovieId() {
  return this.movieId;
 }
}

and in your methods where you set the movieId that is emitted from MovieTable.vue such that the computed property runs dynamically

methods: {
    async watchedMovie(Movie_id, updatedMovie) {
      this.movieId = Movie_id; // setting the movie_id in localvariable so that the computed property sends the updated value to WatchedForm.vue
      // ...Other lines of code
    },
    async unWatchedMovie(Movie_id, updatedMovie) {
      this.movieId = Movie_id; // setting the movie_id in localvariable so that the computed property sends the updated value to WatchedForm.vue
      // ...Other lines of code
    }
  }

Leave a comment