Vue.js 中缺少必需的道具答案

【问题标题】：Missing required prop in Vue.jsVue.js 中缺少必需的道具
【发布时间】：2018-10-23 14:55:13
【问题描述】：

我是vue.js 的新手，所以也许我遗漏了一些明显的东西。我创建了 2 个组件 Content.vue 和 ViewMore.vue。我正在将Content.vue 中数组“animesByGenre”中的属性“genre”传递给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>

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

将道具传递给路线并不像那样工作。现在，所有这些代码所做的只是将genre 属性应用到按钮本身，而不是应用到它要去的路线。您需要将流派作为参数 (/viewmore/:genre/) 或作为查询的一部分 (/viewmore?genre=...) 添加到 URL。 See this page for how that works

【讨论】：