Question 226753 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – Can't pass array to Livewire component with <livewire> element, only with Blade directive

I’m passing a $classes array, defined as a public property in my Livewire controller, to my Livewire component. When I use the blade directive:

@livewire('admin.syllabi', ['classes' => $classes, 'page' => $page, 'type' => 'syllabus', 'searchFields' => 'title, description'])

I can access my $classes array. However, when I use the livewire element:

<livewire:admin.syllabi
        page="{{ $page }}"
        type="syllabus"
        searchFields="title, description"
        classes="{{ $classes }}"
    />

I get the error,

htmlspecialchars(): Argument #1 ($string) must be of type string, array given.

I tried using : in front of the "classes" attribute in the element but then I get a different error:

"syntax error, unexpected token "<"

Has anyone got a solution for this?

Tags:

2

Answers


  1. 0

    To pass in variables or PHP expressions into the component using the "component syntax" <livewire:... />, you’ll have to prefix the property with :, then it’ll be parsed as a PHP expression like this,

    <livewire:admin.syllabi
    :page="$page"
    type="syllabus"
    searchFields="title, description"
    :classes="$classes"
/>

    This is a part of Blade and not limited to Livewire, as described in the official documentation, see the link below.

    https://laravel.com/docs/10.x/blade#passing-data-to-components

    Login or Signup to reply.
  2. 0

    The issue you’re encountering is related to passing the $classes array to your Livewire component using the livewire directive. When using the livewire directive, you can pass data directly to the component’s public properties, but passing an array using the syntax you provided can cause the issue you’re facing.

    Here’s the correct way to pass the $classes array to your Livewire component using the livewire directive:

    <livewire:admin.syllabi
    :page="$page"
    type="syllabus"
    searchFields="title, description"
    :classes="$classes"
/>

    Note the use of the colon (:) before the page and classes attributes. This indicates that you’re binding these attributes to the component’s public properties, which allows Livewire to correctly handle them as data passed to the component.

    In your Livewire component, make sure you have a public property named $classes declared like this:

    public $classes;

    By using the correct binding syntax, you should be able to pass the $classes array to your Livewire component without encountering any issues.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search