Блог

Я пытаюсь изучить laravel и пытаюсь использовать некоторые компоненты.

Я создал компонент макета, который включает навигационную панель, и он правильно работает.

Я все еще работаю с массивами ключей/значений в контроллере, так как еще не изучал базы данных.

Теперь я пытаюсь создать компонент динамической карты и написал следующее в новом компоненте под названием card.blade.php :

 lt;div class="card" style="width: 18rem;"gt;  lt;img class="card-img-top" src="{{$img}}" alt="Card image cap"gt;  lt;div class="card-body"gt;  lt;h5 class="card-title"gt;{{$title}}lt;/h5gt;  lt;p class="card-text"gt;Some quick example text to build on the card title and make up the bulk of the card's content.lt;/pgt;  lt;a href="#" class="btn btn-primary"gt;Go somewherelt;/agt;  lt;/divgt; lt;/divgt; 

На странице, где я хочу показать эти карточки(shop.blade.php), я делаю следующее :

 lt;x-layoutgt;  lt;div class="container"gt;  lt;div class="row"gt;  @foreach($products as $product)  lt;div class="col-4"gt;  lt;x-card  img="{{$product['img']}}"  title = "{{$product['name']}}"  /gt;  lt;/divgt;  @endforeach  lt;/divgt;  lt;/divgt; lt;/x-layoutgt; 

Но когда я запускаю свой локальный хост,карты не отображаются в браузере или, что еще лучше, они не имеют никакого размера(0x0). Я вижу это по «Проверке», которая принимает правильные параметры, а также правильно генерируется из forEach.

Я попытался запустить то же самое, но без какой-либо динамической переменной, и карты отображаются правильно с их размерами.

Это похоже на то, как когда я пытаюсь связать переменные, они теряют измерение.

Есть ли кто-нибудь, кто может помочь мне в этом вопросе? 😀

Огромное спасибо

Компонент состоит из двух частей: класса и представления.

Убедитесь, что класс, вызываемый Card в App/View/Components папке, создан. Если это так, убедитесь, что атрибуты title и img существуют и являются общедоступными.

 App/View/Components/Card.php:     namespace AppViewComponents;  use IlluminateViewComponent;  class Card extends Component {  public $img;  public $title;   public function __construct($img, $title)  {  $this-gt;img = $img;  $this-gt;title = $title;  }   public function render()  {  return view('components.card');  } }