Missing required prop in Vue.js

Question

I am new to vue.js so maybe i'm missing something obvious. I have created 2 components Content.vue & ViewMore.vue. I am passing property "genre" which is inside array "animesByGenre" in Content.vue to ViewMore.vue but somehow it is not working.

Here is the Content.vue component:

<div v-for="(animesAndGenre, index) in animesByGenres" :key="index"
        id="row1" class="container">
  <h5>
    {{animesAndGenre.genre.toUpperCase()}}
    <button class="viewMore" v-bind:genre="animesAndGenre.genre"><a href="#"><router-link :to="{name: 'viewmore'}">view more</router-link></a></button>
  </h5>
  <vs-row vs-justify="center" class="row">
    <vs-col v-for="(anime, i) in animesAndGenre.animes" :key="i"
              vs-type="flex" vs-justify="center"
                vs-align="center" vs-w="2" class="animeCard">
      <vs-card actionable class="cardx">
        <div slot="header" class="cardTitle">
          <strong>
            {{anime.attributes.canonicalTitle}}
          </strong>
        </div>
        <div slot="media">
          <img :src="anime.attributes.posterImage.medium">
        </div>
        <div>
          <span>Rating: {{anime.attributes.averageRating}}</span>
        </div>
        <div slot="footer">
          <vs-row vs-justify="center">
            <vs-button @click="addAnimeToWatchlist(anime)"
                        color="primary" vs-type="gradient" >
                Add to Watchlist
            </vs-button>
          </vs-row>
        </div>
      </vs-card>
    </vs-col>

  </vs-row>
</div>

<script>
  import ViewMore from './ViewMore.vue';
  import axios from 'axios'

  export default {
   name: 'Content',
   components: {
     'ViewMore': ViewMore,
   },
   data () {
     return {
       nextButton: false,
       prevButton: false,
       viewMoreButton: false,
       results: '',
       animes: '',
       genres: ['adventure', 'action', 'thriller', 'mystery', 'horror'],
       animesByGenres: []
     }
   },
   created() {
     this.getAnimes();
     // this.getRowAnime();
     this.genres.forEach( (genre) => {
       this.getAnimeByGenres(genre);
     });
   },
  }
</script>

Here is the ViewMore.vue component (i'm just trying to log genre for now):

<template>
 <div>

 </div>
</template>

<script>
  import axios from 'axios'
  export default {
    props: {
      genre: {
        type: String,
        required: true,            
      },
    },      
  data() {
    return {
      allAnimes: '',
    }
  },
  created() {
    console.log(this.genre);
  }
 }
</script>

Solution

Passing props to routes doesn't work like that. Right now, all this code is doing is applying the genre prop to the button itself, not to the route it's going to. You'll need to add the genre to the URL as a param (/viewmore/:genre/), or as a part of the query (/viewmore?genre=...). See this page for how that works