How to pass a string to a blade component?

Question

As an example there is this component:

resources/views/components/example.blade.php

<div>
    @if($foo === "bar")
        Bar
    @else
        Foo
    @endif
</div>

that I render like

@php
   $foo = "bar";
@endphp
<x-example :foo="$foo" />

what is working. But to have my code looking cleaner, I want to pass the string directly to the component, but the following I tried are not working:

<x-example :foo="bar" />
<x-example :foo='bar' />
<x-example :foo="\'bar\'" />
<x-example :foo="'bar'" />
<x-example :foo=""bar"" />

Hard coded values don't require the : before the parameter name; <x-example foo="bar" />. — Peppermintology
– Peppermintology, Commented Sep 15, 2022 at 9:49
That's it - thank you. If you could add that as an answer, I'd vote it as resolved — JanBoehmer
– JanBoehmer, Commented Sep 15, 2022 at 9:51
@JanBoehmer you should take a look at how to pass data to Blade Components which provides some useful examples that should get you started. — ThS
– ThS, Commented Sep 15, 2022 at 9:53

Peppermintology · Accepted Answer · 2022-09-15 10:00:41Z

7

Easy mistake to make, as mentioned in the Laravel documentation on passing data to components;

You may pass data to Blade components using HTML attributes. Hard-coded, primitive values may be passed to the component using simple HTML attribute strings. PHP expressions and variables should be passed to the component via attributes that use the : character as a prefix

So update how you use the Blade component as below:

<x-example foo="bar" />

edited Sep 15, 2022 at 10:00

answered Sep 15, 2022 at 9:54

Peppermintology

10.4k4 gold badges34 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ThS Over a year ago

just a suggestion, adding a link to the Laravel Blade Components Docs would make your answer more powerful and helpful.

Peppermintology Over a year ago

@ths Indeeed. I wasn't going to as you'd already linked to the docs in your comment. I'll add a link regardless as you're correct, it is helpful regardless. [:

ThS Over a year ago

yes indeed, thank you for having my suggestion considered and making the required changes.

Collectives™ on Stack Overflow

How to pass a string to a blade component?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related