foreach a blade view component with dynamic data

Question

i am trying to loop over blade component by passing an array data. it successfully compiled but it is not showing up in the browser and also not giving an error

here is card.blade.php file

<div>
    <h1>{{$name}}</h1>
    <h2>{{$age}}</h2>
    <h3>{{$work}}</h3>
</div>

here is main file view file

    @php
        $arr = [
           
            ['name'=>'1','age'=>'2','work'=>'3'],
            
            ['name'=>'4','age'=>'5','work'=>'6']
        ];
    @endphp

@foreach ($arr as $de)

    <x-card :name={{$de['name']}} :age={{$de['age']}} :work={{$de['work']}}/>
    
@endforeach 

it also shows attached data when i click view source file

    <x-card :name=1 :age=2 :work=3/>
    

    <x-card :name=4 :age=5 :work=6/>

but i is not showing up in the browser, browser is blank

Answer 1

You just need to delete {{}} syntax from the attributes

 <x-card :name="$de['name']" :age="$de['age']" :work="$de['work']"/>

for more info check the Component-Attributes from the docs