I have a question about Laravel - Documentation - Accessing Attributes & Slots Within Component Classes
I read this section, and did some experiments. What I've found is that the closure only can return string but component.view, and what it returns would overwrite what is defined on the component view, which leads me to a question What use case is this feature for?
Could anyone make some examples of using this feature for me?
Anyone could help me with it will be so much appreciated.
If the string matches an existing view then it will render that view and not overwrite it. You can return an existing view as follows:
// app/View/Components/Post.php
public function render()
{
return function (array $data) {
// $data['componentName'];
// $data['attributes'];
// $data['slot'];
return 'components.post'; // /resources/views/components/post.blade.php
};
}
// views/components/post.blade.php
<div class="item">
<div class="title">
New Post
</div>
<div class="content">
<p>Content post...</p>
</div>
</div>
Example:
// component class
class Link extends Component
{
public $path = "";
public function __construct()
{
$this->path = request()->path();
}
public function render()
{
return function (array $data) {
if(isset($data['attributes']['href'])) {
$data['attributes']["link"] = $data['attributes']['href'];
if ($data['attributes']['href'] == "/".$this->path) {
$data['attributes']['active'] = $data['attributes']['class']." link-active-class";
} else {
$data['attributes']['active'] = $data['attributes']['class'];
}
}
return 'components.commons.link';
};
}
}
// component view
<a href="{{ $attributes['link'] }}" class="{{ $attributes['active'] }}">
{{ $slot }}
</a>
Usage:
<x-commons.link href="/module/news" class="primary-action">
<i class="fas fa-newspaper"></i> News
</x-commons.link>
Related
How can i get the values from nouislider in livewire? So i can compare the min and max price. I don't see how i can get the values. It has 2 handles a min and max price.
<div wire:ignore id="slider-margin"></div>
<div class="d-flex">
<div wire:model="min_price" class="me-5" id="slider-margin-value-min" aria-valuenow="min_price"></div>
<div wire:model="max_price" id="slider-margin-value-max" aria-valuemax="max_price"></div>
</div>
class Shop extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public $min_price;
public $max_price;
public function render()
{
$this->products = Product::query()
->wherebetween('price',[$this->min_price,$this->max_price])->paginate(9);
return view('livewire.shop',[
'products'=>$this->products
]);
}
}
try this code:
<div wire:ignore id="slider-margin"></div>
<div class="d-flex">
<div wire:click="setMin({{ $min_price }})" class="me-5" id="slider-margin-value-min" aria-valuenow="min_price"></div>
<div wire:click="setMax({{ $max_price }})" id="slider-margin-value-max" aria-valuemax="max_price"></div>
</div>
and:
class Shop extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public $min_price;
public $max_price;
public function setMax($max_price)
{
$this->max_price= $max_price;
}
public function setMin($min_price)
{
$this->min_price = $min_price;
}
public function mount()
{
$this->products = Product::query()
->wherebetween('price',[$this->min_price,$this->max_price])->paginate(9);
}
}
A div is no input, so a wire:model won't do anything on it. noUiSlider builds HTML after page load, so to be able to use it for variables in Livewire, you will have to use JavaScript. You can listen for the events and use the global Livewire JS object to emit changes to your component
So, an example of how this might work:
let slider = document.getElementById('slider-margin');
slider.noUiSlider.on('update', function (values) {
Livewire.emitTo('shop', 'sliderUpdated', values);
});
Then in your component, you can do something with the passed values:
function sliderUpdated(array $values)
{
$this->min_price = \Illuminate\Support\Arr::first($values);
}
Ensure to take a good read on the event docs, as I am not 100% sure above code will function straight away, but I think this will at least get you in the right direction!
Im getting this error when sending an event from child to parent container. I am using wire:key as recommended but get the JS error Cannot read property 'fingerprint' of null. Any ideas what I am doing wrong? Please see example below.
Container
class Container extends Component
{
public $listeners = [
'submit'
];
public function render()
{
return view('livewire.container');
}
public function submit()
{
//dd("The child says wow - it works!");
}
}
with view
<div>
<h1>Im the container</h1>
#foreach([1,2,3] as $nbr)
#livewire('child', compact('nbr'))
#endforeach
</div>
Child
class Child extends Component
{
public $nbr;
public function mount($nbr)
{
$this->nbr = $nbr;
}
public function render()
{
return view('livewire.child');
}
public function submit()
{
$this->emit('submit', 'wow!');
}
}
with view
<div wire:key="{{ $nbr }}">
Hey im a child
<button wire:click="submit">submit</button>
</div>
When defining Livewire components in a loop, you need to give them a key, so Livewire can keep track of each individual component.
<div>
<h1>Im the container</h1>
#foreach([1,2,3] as $key=>$nbr)
#livewire('child', compact('nbr'), key($nbr))
#endforeach
</div>
This is done on the component, not on the root-element in the view, meaning that its incorrectly placed with wire:key="{{ $nbr }}" being in your child-view.
hi guys am in need of assistance , i know this seems to be an easy one but am a bit confused , i have a foreach loop in my main.blade.php file, which shows foods from my database it works fine but when its clicked it meant to lead to the individual post and thats where i get the error
Undefined variable: foods
heres my foreach loop in main.blade.php file
#foreach($foods as $food)
<li class="item">
<a href="{{ route('Foods.show', $food->id) }}">
<img src="{{ Storage::disk('local')->url('food_images/'.$food->image ) }}" class="img-responsive w-25 p-3" alt="Food" >
<div class="menu-desc text-center">
<span>
<h3> {{ $food->title }}</h3>
{{ $food->body }}
</span>
</div>
</a>
<h2 class="white"> #{{ $food->price }}</h2>
</li>
#endforeach
heres my main.blade.php controller
public function LoadHome()
{
$foods = Food::all();
$foods = Food::orderBy('created_at','desc')->inRandomOrder()
->limit(12)
->get();
return view('pages.home')->withFood($foods);
}
and heres Foods.show controller function
public function show($id)
{
$foods = Food::Find($id);
return view('foods.show')->withFood($foods);
}
please what am i doing wrong
Have you tried passing data from your controller to the view using this something like this:
public function show($id)
{
$foods = Food::Find($id);
return view('foods.show')->with('foods', $foods);
}
or, if you're passing multiple variables to the view:
public function show($id)
{
$foods = Food::Find($id);
$something = "else";
return view('foods.show', compact('foods', 'something'));
}
Your view doesn't know what $foods is at that point, so it's always good practice to check that foods is set before the loop:
#if (isset($foods) && $foods->count() > 0)
#foreach($foods as $food)
...
#endforeach
#endif
See the official Laravel docs for more information.
If you want the variable to be named foods in the view then you would need to use withFoods not withFood:
return view(...)->withFoods($foods);
As mentioned in the other answers, there are other ways to pass data to the views as well.
There is no data being passed to a view.
This is how you pass data to a view:
public function LoadHome()
{
$foods = Food::orderBy('created_at','desc')->inRandomOrder()
->limit(12)
->get();
return view('pages.home', ['foods' => $foods])
}
If you always want to have $foods in main.blade.php you should place this in a service provider
View::share('foods', Food::orderBy('created_at','desc')->inRandomOrder()
->limit(12)
->get());
https://laravel.com/docs/7.x/views#sharing-data-with-all-views
I have three models :
Serie ($id)
public function saisons()
{
return $this->hasMany(Season::class);
}
public function episodes()
{
return $this->hasManyThrough(Episode::class, Season::class);
}
Season ($serie_id)
public function serie()
{
return $this->belongsTo(Serie::class);
}
public function episodes()
{
return $this->hasMany(Episode::class);
}
Episode ($season_id)
public function season()
{
return $this->belongsTo(Season::class);
}
public function serie()
{
return $this->BelongsToThrough(Serie::class, Season::class);
}
I would like to show one specific season from a serie with the episodes associated
My view
<h1 class="title">{{$serie->seasons->number}}</h1>
#foreach ($serie->seasons->episodes as $episode)
<div class="row">
<div class="columns">
<div class="col">
{{$episode->number}}
{{$episode->name}}
#if(isset($episode->programmation->date))
{{$episode->programmation->date}}
#endif
#if (($episode->season_finale) == '0')
Non
#elseif (($episode->season_finale) == '1')
Oui
#endif
#foreach ($episode->chaines as $chaine)
{{$chaine->name}}
#endforeach
</div>
</div>
</div>
#endforeach
Route
Route::get('/serie/{serie}/saison/{season}', 'Front\SaisonController#show')->name('saison.show');
For my url, I choose to show the number of the saison and not the id and I think that's the problem.
How can I do that in a proper way ?
I think this approach can help you.
$serie = Serie::where('id',$id)->with('seasons'=>function($query) use ($season_id) {
$query->where('season_id',$season_id)->with('episodes')->get();
})->get();
Ok, someone help me to find the right answer :
$serie = Serie::findOrFail($serie);
$season = Season::where('serie_id', $serie->id)->where('season.number', $season)->first();
I'm still a novice to Laravel 4 and trying to figure out why I'm getting an error saying that Method [inventoryNotFound] does not exist. It has to do when I am attempting to use the InventoryController#show function.
On my Index page I have a href that I'm trying to send to the show views. The code looks like this:
#foreach($inventory as $item)
<div class="col-md-4 inventory">
<img class="img-responsive" src="{{{$item->image}}}">
<a class="description" href="">{{{$item->title}}}</a>
#foreach($item->size_details as $details)
<p>{{ $details->size }}: {{ $details->price }}</p>
#endforeach
</div>
#endforeach
My show function is:
class InventoryController extends BaseController {
public function index()
{
$inventory = Inventory::all();
return View::make('inventories.index')->with('inventory', $inventory);
}
public function show($id)
{
$inventory = Inventory::find($id);
if(is_null($inventory)){
return $this->inventoryNotFound();
}
return View::make('inventories.show',['inventory' => $inventory]);
}
}
And I have a resource controller as my routes:
Route::resource('inventories', 'InventoryController');
Even when I attempt to run my routes manually, I run into the same problem.
Any ideas as to why?