2

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"" />
JanBoehmer
  • 395
  • 3
  • 14
  • Hard coded values don't require the `:` before the parameter name; ``. – Peppermintology Sep 15 '22 at 09:49
  • That's it - thank you. If you could add that as an answer, I'd vote it as resolved – JanBoehmer Sep 15 '22 at 09:51
  • @JanBoehmer you should take a look at how to pass data to [`Blade Components`](https://laravel.com/docs/9.x/blade#passing-data-to-components) which provides some useful examples that should get you started. – ThS Sep 15 '22 at 09:53

1 Answers1

5

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" />
Peppermintology
  • 9,343
  • 3
  • 27
  • 51
  • 1
    just a suggestion, adding a link to the [Laravel Blade Components Docs](https://laravel.com/docs/9.x/blade) would make your answer more powerful and helpful. – ThS Sep 15 '22 at 09:56
  • 1
    @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. [: – Peppermintology Sep 15 '22 at 09:57
  • yes indeed, thank you for having my suggestion considered and making the required changes. – ThS Sep 15 '22 at 09:59