Отсутствует необходимая реквизит в Vue.js

Question

Я новичок в vue.js, так что, возможно, я упускаю что-то очевидное.Я создал 2 компонента Content.vue & ViewMore.vue.Я передаю свойство «жанр», который находится внутри массива «animesByGenre» в Content.vue до ViewMore.vue, но почему-то оно не работает.

Вот компонент Content.vue:

<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>

Вот компонент ViewMore.vue (сейчас я просто пытаюсь записать жанр):

<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>

Answer 1

Передача реквизита на маршруты не работает так.Прямо сейчас весь этот код применяет genre опору к самой кнопке, а не к маршруту, по которому она идет.Вам нужно будет добавить жанр к URL-адресу как параметр (/viewmore/:genre/) или как часть запроса (/viewmore?genre=...). См. На этой странице, как это работает

Answer 2

Вы наложили реквизит genre в соответствии с требованиями:

genre: {
  type: String,
  required: true,            
},

Это означает, что всякий раз, когда вы вызываете компонент с указанным выше кодом, вы должны передать значение этому компоненту.

Итак, если имя вашего компонента movie, вы должны передать genre как:

<movie :genre="some-value"></movie>

Я не вижу в вашем коде передачи значения жанру, также вы должны поставить "name""атрибут ваших компонентов как:

...
export default {
  name: 'something',
  props: {
    genre: {
        type: String,
        required: true,            
    },
  },   
...