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
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"/>
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:
Source: https://laravel.com/docs/9.x/blade#passing-data-to-components