Pass array as attribute in blade custom component

Question

I have defied a generic input component in Laravel like this:

//file: views/components/input.balde.php    
<input  @foreach ($attrs as $attr=>$val)
                {{ $attr }} = "{{ $val }}"
            @endforeach
            >

And I would like to use it as follows in blade templates:

<x-input :attrs="{{ ['type'=>'text', 'placeholder'=>"Search.."] }}" ></x-input>

the thing is when I pass an array object like the example above it seems to break the view, however when I send a variable like this:

@php
    $attributesArray = ['type'=>'text', 'placeholder'=>"Search.."];
@endphp    
<x-input :attrs="$attributesArray" ></x-input>

Is there a way to pass the array as is without having to create a variable and sending it so that I don't add unnecessary @php directive?

ruleboy21 · Accepted Answer · 2022-10-29 20:05:28Z

4

Just pass in the array without the double curly braces {{ }}

<x-input :attrs="[ 'type' => 'text', 'placeholder' => 'Search...' ]" />

edited Oct 29, 2022 at 20:05

answered Jan 16, 2022 at 13:53

ruleboy21

6,5215 gold badges23 silver badges37 bronze badges

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

Comments

CodeWithKyrian · Accepted Answer · 2021-09-16 14:19:29Z

-1

Try this
<x-input :attrs="{!! [ 'type' => 'text', 'placeholder' => 'Search...' ] !!}" />

answered Sep 16, 2021 at 14:19

CodeWithKyrian

525 bronze badges

2 Comments

Lamar Over a year ago

unfortunately this gives an error: syntax error, unexpected '<'

Harsh Patel Over a year ago

its not working

Milad · Accepted Answer · 2021-09-16 11:25:15Z

-2

Hi if I understand right you want to get any array values in the string you just simply can do it but using implode.

<x-input :attrs="{{ implode($attributesArray , " ") }}" ></x-input>

and the $attributesArray variable is just a variable to be sent to the blade it a key value array

answered Sep 16, 2021 at 11:25

Milad

933 silver badges9 bronze badges

1 Comment

Lamar Over a year ago

Interesting, however why can I send a variable as a variable in a component, but not send an array as a variable the same way? And what's the difference between sending the array name as variable and sending the array directly?

Collectives™ on Stack Overflow

Pass array as attribute in blade custom component

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related