CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Dominik Picke
Dominik Picke

Reputation: 159

Vuejs - How to pass props to a child-component from an array that lives in data?

I use a v-for-loop to render any amount of components, based on a preceding API-call to a Rails-back-end. Now I store the response as an array of objects in the data of my "mother-component", from which I would like to pass props down to the child-components. How can I achieve that? I've not been able to find a solution to this I'm afraid.

I tried several notations of accessing the array in data, most of which end up throwing compilation errors.

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

This is the child-components code:

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

Expected result: I am able to pass any of the needed props from the array.

Upvotes: 2

Views: 1221

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

so the error comes from this :game-rating="gameRating" because you're binding that prop to undefined property gameRating, i think you should do :game-rating="boardGame.gameRating" or gameRating should be defined as data or computed property like :

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

or 

 computed:{
     gameRating(){
        ...
        }
      }

Update :

According to @AndrewShmig comment HTML doesn't support camelCase attributes So you should something like :

<GameCard v-for="boardgame in boardgames"
  :key="id"
  :game-rating="boardgame.gameRating"
  :game-title="boardgame.title"
  :game-description="boardgame.description"
  :game-image="boardgame.cover_image_url"
  :game-playerCount="boardgame.gamePlayerCount" 
  :game-duration="boardgame.gameDuration" 
/>

Upvotes: 2

Related Questions