Blade视图组件foreach循环传递动态数据后无渲染无报错问题排查

问题原因 #

使用Blade组件动态参数传递时语法错误：当参数前加:前缀声明为动态传值时，不需要额外包裹{{ }}插值语法，错误的写法会导致Blade无法识别<x-card />为组件标签，直接将其作为普通自定义HTML标签输出，浏览器不识别该标签就会出现空白无内容的情况。

解决方法 #

你可以任选以下两种正确写法的任意一种修改主视图的循环代码：

写法1：保留动态绑定前缀:，去掉{{ }}

@foreach ($arr as $de)
    <x-card :name="$de['name']" :age="$de['age']" :work="$de['work']"/>
@endforeach 

写法2：去掉动态绑定前缀:，保留{{ }}插值

@foreach ($arr as $de)
    <x-card name="{{$de['name']}}" age="{{$de['age']}}" work="{{$de['work']}}"/>
@endforeach 

附加操作 #

修改完成后执行以下命令清理视图缓存，避免旧的编译缓存影响效果：

php artisan view:clear

内容的提问来源于stack exchange，提问作者Mubeen Amanat