Passing data from one component to another in Vue: A database perspective

Question

Passing data from one component to another in Vue: A database perspective

I'm struggling to pass the id of a clicked button from MovieTable.vue to the WatchedForm.vue component. The WatchedForm.vue component is responsible for updating the data in the database based on the provided id, which corresponds to the Movie_id in the database. I attempted to use props to achieve this, but unfortunately couldn't get it to work. Any assistance would be greatly appreciated as I'm feeling quite frustrated!

App.vue:


        <template>
          <div class="container p-5">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#movieModal">
              Add Movie
            </button>
        
            <movie-form @add:movie="addMovie" />
            <movie-table
                :movies="movies"
                @delete:movie="deleteMovie"
                @edit:movie="WatchedMovie"
                @edit2:movie="unWatchedMovie"
            />
          </div>
          
          <watched-form
                @edit:movie="watchedMovie"
                @edit2:movie="unWatchedMovie"
                />
        </template>

MovieTable.vue:


        <template>
          <div id="movie-table">
            <p v-if="movies.length < 1" class="empty-table">No movies</p>
            <table v-else>
              <thead>
              ...
            </table>
          </div>
        </template>

And WatchedForm.vue:


        <template>
          <div id="watched-form">
            <div class="modal fade" id="watchedModal" tabindex="-1" aria-labelledby="watchedModalLabel" aria-hidden="true">
                ...
            </div>
          </div>
        </template>

javascript database vue.js vue-component

Answer 1

Answer №1

To implement the necessary changes in App.vue, make sure to pass the movie id as props from MovieTable.vue to WatchedForm.vue using a computed property instead of a variable. Here is the recommended method:

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

Additionally, introduce a variable named movieId within the data() function:

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

Define a computed property as follows:

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

Next, update your methods accordingly to set the emitted movieId from MovieTable.vue in order for the computed property to transmit the updated value to WatchedForm.vue:

methods: {
    async watchedMovie(Movie_id, updatedMovie) {
      this.movieId = Movie_id; // Storing the movie_id locally to trigger the computed property and update WatchedForm.vue
      // ...Other lines of code
    },
    async unWatchedMovie(Movie_id, updatedMovie) {
      this.movieId = Movie_id; // Storing the movie_id locally to trigger the computed property and update WatchedForm.vue
      // ...Other lines of code
    }
  }

Answer 2

To implement the necessary changes in App.vue, make sure to pass the movie id as props from MovieTable.vue to WatchedForm.vue using a computed property instead of a variable. Here is the recommended method:

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

Additionally, introduce a variable named movieId within the data() function:

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

Define a computed property as follows:

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

Next, update your methods accordingly to set the emitted movieId from MovieTable.vue in order for the computed property to transmit the updated value to WatchedForm.vue:

methods: {
    async watchedMovie(Movie_id, updatedMovie) {
      this.movieId = Movie_id; // Storing the movie_id locally to trigger the computed property and update WatchedForm.vue
      // ...Other lines of code
    },
    async unWatchedMovie(Movie_id, updatedMovie) {
      this.movieId = Movie_id; // Storing the movie_id locally to trigger the computed property and update WatchedForm.vue
      // ...Other lines of code
    }
  }

Passing data from one component to another in Vue: A database perspective

Answer №1

Similar questions

The negative z-index is causing issues with my ability to select classes using jQuery

Troubleshooting issue: Django and Javascript - Why is my dependent dropdown feature not

Error encountered with Content Security Policy while utilizing react-stripe

What is causing these TypeScript type assertions to go unnoticed?

Detecting when the Ctrl key is pressed while the mouse is hovering over an element in React

Looping through an array of data retrieved from the MS Graph API

Is it possible to perform a GET request between a site using HTTPS and another using HTTP?

Remove a data entry from the MySQL database by selecting the corresponding row in the table and utilizing the DELETE function

Jest may come across test suites, but it discreetly disregards the individual tests

When using Python Selenium, we can see JavaScript in the view page source, but inspecting elements reveals the

Sending a JavaScript object as a prop in a React component

Utilize Vue and Django to submit dynamic form data efficiently

JavaScript issues in FireFox and Internet Explorer when using JQuery

Issues with Promise execution sequence in ExpressJS Middleware

Using PHP and JavaScript to keep track of file modifications

Is it possible to capture and store server responses on the client side using Node.js and React Native?

Node.js - Error: JSON.Parse and JSON.Stringify are not recognized as functions

How can we rearrange the positions of three items in an array?

Instructions for creating a slush machine

JavaScript's Selenium WebDriver - Explicit Waiting