Vuejs-как передать реквизит дочернему компоненту из массива, который живет в данных?

Vuejs-как передать реквизит дочернему компоненту из массива, который живет в данных?

13.01.2019 07:36:18 Просмотров 46 Источник

Я использую V-for-loop для визуализации любого количества компонентов, основанных на предыдущем вызове API для Rails-back-end. Теперь я сохраняю ответ в виде массива объектов в данных моего "материнского компонента", из которого я хотел бы передать реквизиты дочерним компонентам. Как я могу этого достичь? Боюсь, я не смог найти решение этой проблемы.

Я попробовал несколько обозначений доступа к массиву данных, большинство из которых в конечном итоге вызывают ошибки компиляции.

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

Ожидаемый результат: я могу передать любой из необходимых реквизитов из массива.

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/54170916/vuejs-how-to-pass-props-to-a-child-component-from-an-array-that-lives-in-data#comment95170899_54170916
что случилось ? это кажется хорошим
https://stackoverflow.com/questions/54170916/vuejs-how-to-pass-props-to-a-child-component-from-an-array-that-lives-in-data#comment95170951_54170916
Каким-то образом реквизит установлен в undefined, когда я проверяю дочерние компоненты с помощью инструментов Vue-Dev в Chrome.
https://stackoverflow.com/questions/54170916/vuejs-how-to-pass-props-to-a-child-component-from-an-array-that-lives-in-data#comment95170973_54170916
пожалуйста, укажите код дочернего компонента
https://stackoverflow.com/questions/54170916/vuejs-how-to-pass-props-to-a-child-component-from-an-array-that-lives-in-data#comment95171081_54170916
Я обновил сообщение, Спасибо, что посмотрели!
https://stackoverflow.com/questions/54170916/vuejs-how-to-pass-props-to-a-child-component-from-an-array-that-lives-in-data#comment95171158_54170916
вы также передаете реквизиты, которые не определены в дочернем компоненте
https://stackoverflow.com/questions/54170916/vuejs-how-to-pass-props-to-a-child-component-from-an-array-that-lives-in-data#comment95171602_54170916
Я удалил ненужные, однако это ничего не изменило

Ответы - Vuejs-как передать реквизит дочернему компоненту из массива, который живет в данных? / Vuejs - How to pass props to a child-component from an array that lives in data?

Является ответом!
Boussadjra Brahim

13.01.2019 08:40:10

таким образом, ошибка происходит от этого :game-rating="gameRating" , потому что вы связываете, что опора на неопределенное свойство gameRating, я думаю, что вы должны сделать :game-rating="boardGame.gameRating"или gameRatingдолжны быть определены как данные или вычисляемые свойства, такие как :

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

или

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

Обновление :

Согласно комментарию @AndrewShmig HTML не поддерживает camelCase

https://stackoverflow.com/questions/54170916/vuejs-how-to-pass-props-to-a-child-component-from-an-array-that-lives-in-data/54171485#comment95171930_54171485
если у вас есть свойство с именем gameRating, вы должны написать:game-rating="gameRating"в своей HTML-части, из-за преобразований camelCase / kebab-case в Vue. Увидеть этот ответ stackoverflow.com/questions/54163232/…
https://stackoverflow.com/questions/54170916/vuejs-how-to-pass-props-to-a-child-component-from-an-array-that-lives-in-data/54171485#comment95171948_54171485
спасибо @AndrewShmig я пропустил, что я собираюсь исправить это
https://stackoverflow.com/questions/54170916/vuejs-how-to-pass-props-to-a-child-component-from-an-array-that-lives-in-data/54171485#comment95172265_54171485
Большое спасибо вам двоим! Ошибка действительно возникла из-за применения неправильных соглашений об именах, а именно использования camelCase, где я должен был использовать kebab-case.
https://stackoverflow.com/questions/54170916/vuejs-how-to-pass-props-to-a-child-component-from-an-array-that-lives-in-data/54171485#comment95172320_54171485
@DominikPicke пожалуйста, upvote AndrewShmig ответ, так как он помогает нам найти проблему
https://stackoverflow.com/questions/54170916/vuejs-how-to-pass-props-to-a-child-component-from-an-array-that-lives-in-data/54171485#comment95172342_54171485
У меня есть, спасибо :)
Закрыть X