1

So I want to pass more than one params from Home.vue to Movie.vue using params with router-link like this :

    <ul>
      <li class="movie-card" v-for="movie in movies" :key="movie.id">


    <router-link
        :to="{
          name: 'Movie',
          params: { id: movie.id, subtitle: movie.subtitle, movie: movie},
        }"
        class="movie-link"
        target="_blank"
      >

     </li>
    </ul>

And accepting props in Movie.vue like this :

  props: ["id", "subtitle", "movie"],

And trying to acces them in Movie.vue like this :

    <p>The movie id is {{ id }}</p>
            
    <p>detail subtitle is : {{ subtitle }}</p>

Notice that the subtitle and the Object movie are not passed,

Notice that I want to pass the id, the subtilte, and the Object movie (that is a result of API call fetch)

when I try to do a to see what are the params that are passing it confirms that only id does:

    {{ this.$route.params }}

    params : { "id": "PETITOU0152W0143012" }

It will be all good if me if I just can pass the Object movie and do all what I want with it.

Mourad Over Flow
  • 191
  • 1
  • 5
  • 16
  • This isn't what params are for or how they work. Parameters add queries to the URL for fetching data. You should use only the id parameter on the movie page to fetch the correct data based on the id in the url. – dantheman Feb 12 '22 at 18:17

0 Answers0