Question

我是vue.js的新手，所以也许我缺少明显的东西。我已经创建了两个组件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>

Answer 1

您已根据需要投放了道具use Illuminate\Database\Connection; use Illuminate\Database\Connectors\ConnectionFactory; use Psr\Container\ContainerInterface as Container; $container[Connection::class] = function (Container $container) { $settings = $container->get('settings'); $config = [ 'driver' => 'mysql', 'host' => $settings['db']['host'], 'database' => $settings['db']['database'], 'username' => $settings['db']['username'], 'password' => $settings['db']['password'], 'charset' => $settings['db']['charset'], 'collation' => $settings['db']['collation'], 'prefix' => '', ]; $factory = new ConnectionFactory(new \Illuminate\Container\Container()); $connection = $factory->make($config); // Disable the query log to prevent memory issues $connection->disableQueryLog(); return $connection; };：

genre

这意味着，每当调用其中包含上述代码的组件时，都必须将值传递给该组件。

因此，如果您的组件名称为genre: { type: String, required: true, },，则必须将流派传递为：

movie

我没有在您的代码中看到将值传递给流派，也应该将“ name”属性添加到组件中，如下所示：

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

Answer 2

将道具传递到路线上并非如此。现在，所有这些代码所做的就是将genre道具应用于按钮本身，而不是应用于按钮的路线。您需要将该类型作为参数（/viewmore/:genre/）或作为查询的一部分（/viewmore?genre=...）添加到URL。 See this page for how that works

Vue.js中缺少必需的道具

2 个答案: