Question

基于对Rails后端的先前API调用，我使用v-for循环渲染任意数量的组件。现在，我将响应作为对象数组存储在我的“母组件”的数据中，我希望从中将prop传递给子组件。我该如何实现？恐怕我无法找到解决方案。

我尝试了几种在数据中访问数组的表示法，其中大多数最终都会引发编译错误。

<template>
  <div class="row">
    <GameCard v-for="boardgame in boardgames"
      :key="id"
      :gameRating="gameRating"
      :gameTitle="boardgame.title"
      :gameDescription="boardgame.description"
      :gameImage="boardgame.cover_image_url"
      :gamePlayerCount="boardgame.gamePlayerCount" 
      :gameDuration="boardgame.gameDuration" 
    />
  </div>
</template>

<script>
  import axios from 'axios';
  import GameCard from '../GameCard/GameCard';

  export default {
    data() {
      return {
        boardgames: []
      }
    },
    created() {
      axios.get('http://localhost:3001/api/v1/boardgames/')
        .then(response => {
          console.log(response.data)
          const data = response.data
          const fetchedBoardgames = []
          for (let key in data) {
            const boardgame = data[key]
            boardgame.id = key
            fetchedBoardgames.push(boardgame)
          }
          this.boardgames = fetchedBoardgames
        })
        .catch(error => console.log(error))
    },
    components: {
      GameCard,
    }
  };
</script>

<style lang="scss">

</style>

这是子组件代码：

<template>
  <div class="col">
    <article class="card gamecard">
      <a href="">
        <div class="card image-wrapper">
          <img class="card-img-top" src="https://via.placeholder.com/250x250.jpg" alt=""/>
        </div>
        <RatingBadge :gameRating="gameRating"/>
        <div class="gamecard-info-overlay">
          <div class="gamecard-essential-info">
            <span class="players">{{ gamePlayerCount }}</span>,<span class="duration">{{ gameDuration }}</span>
          </div>
        </div>
        <div class="card-body">
          <h3 class="gamecard-card-title">Spieltitel <span>(2019)</span></h3>
          <hr class="my-4"/>
          <p class="card-text">Lorem ipsum dolor amet brooklyn leggings cloud bread poke snackwave gentrify. Hella farm-to-table brooklyn cray typewriter, beard hoodie mixtape subway tile knausgaard keffiyeh. Palo santo post-ironic irony tumeric actually. Offal tumblr trust fund fixie, cornhole direct trade cliche intelligentsia street art pug fingerstache four dollar toast.</p>
        </div>
        <GameCardButton />
      </a>
    </article>
  </div>
</template>

<script>
  import RatingBadge from './RatingBadge.vue';
  import GameCardButton from './GameCardButton.vue';

  export default {
    props: ['gameRating', 'gameDuration', 'gamePlayerCount'],
    components: {
      RatingBadge,
      GameCardButton,
    }
  };
</script>

预期结果：我能够从阵列中传递任何所需的道具。

Answer 1

所以错误来自此git diff --name-only origin/master，因为您将该属性绑定到未定义的属性:game-rating="gameRating"，我认为您应该将gameRating或:game-rating="boardGame.gameRating"定义为数据或计算属性，如：

gameRating

或

data(){
   return{
    gameRating:'',
     ...
    }
 }

更新：

根据@AndrewShmig注释，HTML不支持computed:{ gameRating(){ ... } }属性，因此您应该使用以下内容：

camelCase

如何将道具从存在于数据中的数组传递到子组件？

1 个答案: