skip to Main Content

First, i have the component file, located at resources/views/component.

game-card.blade.php

@props(['game'])
<div class = 'games'>
    <a href = 'game/{{$game->id}}'> view page </a>
    <p> game: {{$game->name}} </p> <br>
    <p> genre: {{$game->genre}} </p> <br>
</div>

Then this component is called at my view, located in resources/views

listing.blade.php

@extends('layout')
@section('list')
    <div class = 'listContainer'>
        @unless(count($games) === 0)
            @foreach($games as $game)
                //doesn't work
                <x-game-card :game = "$game"/> 
                
            @endforeach
        @else
            <p> 0 Games </p>
        @endunless
    </div>
@endsection

The variable $game is not passed in the component <x-game-card/>, i even tried to use short atribute syntax (<x-game-card :$game/>) but it still doesn’t work.

If it matters, the file listing.blade.php is yielded at the file layout.blade.php, located in the same folder.

layout.blade.php

  <body>
<!-- Header  -->
@yield('list')

@yield('singlegame')

@include('partials._footer')

2

Answers


  1. Chosen as BEST ANSWER

    i found the root of the problem. I just can't believe that the solution is so simple. I am going to post it here so less people make the same mistake i did

    First, create the class (i personally use the command php artisan make:component to do that) and update it just like Nico did.

    Second, when you put the <x-component in the HTML, MAKE SURE TO NOT LEAVE ANY SPACES IN THE VARIABLE!!! my mistake was using <x-game-card :game = "$game"/>

    instead of <x-game-card :game="$game"/>


  2. For any prop that you want to pass to your component, you need to register it on the component class. In this case, the class is probably app/View/Components/GameCard.php

    On the class, you need to do something like:

    class GameCard extends Component
    {
    
        public $game;
    
        public function __construct($game)
        {
            $this->game = $game;
        }
    

    Source: https://laravel.com/docs/9.x/blade#passing-data-to-components

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search