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

Laravel How to pass collection array into x-component element

Hi I need help for my project, I tried to make component panel named "x-panel-sum" and I pass a collection array into element "x-panel-sum". But when i call it from my main blade "index.blade" it turns to be weird such as i lose double quote symbol inside my collection

example:

  • normally if i put collection directly in my index.blade
{{ $buildings }}

and it show to be like this:

[{"id":1,"name":"Kantor Pusat"}]
  • But when i try to call x-component
<x-panel-sum building="{{ $buildings }}"></x-panel-sum>

and the result to be like this:

[{&quot;id&quot;:1,&quot;name&quot;:&quot;Kantor Pusat}]

the double quote becomes "&quot", How do i fix this?

Tags:

2

Answers


  1. 0

    The issue you are facing is due to the HTML encoding of the double quotes that happens when passing the data as an attribute value in the HTML element. To avoid this, you can use the htmlspecialchars_decode function in the component’s blade file to decode the HTML entities.

    For example, in your "x-panel-sum" component blade file, you can use the following code:

    @props(['building'])

<div>
    {{ htmlspecialchars_decode($building) }}
</div>

    This will decode the HTML entities and display the original JSON string with double quotes intact.

    Then, you can pass the data to the component in the following way:

    <x-panel-sum building='{{ json_encode($buildings) }}'></x-panel-sum>

    Here, json_encode function will convert the PHP array into a JSON string and the JSON string will be passed to the component as an attribute value. Since the JSON string is wrapped in single quotes, there won’t be any issue with HTML encoding.

    Login or Signup to reply.
  2. 0

    You can pass a collection to your component like

    <x-panel-sum :building="$buildings"></x-panel-sum>

    note the colon before the attribute. This indicates that the parameter is a php variable.

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

Back To Top
Search