Pass PHP array onto Vue component using props

Question

• Building a Laravel app with a few Vue components
• Want to pass a PHP array onto a Vue component using props

Here's an example of such PHP array:

["Foo" => 100, "Bar" => 50]

Great. Here's my attempt at passing them onto the Chart component:

<Chart points="{!! json_encode($points) !!}"></Chart>

This looks fine, but the strings (Foo and Bar) inside the $points array get encapsulated with " (double quotes) when using json_encode(). This means that whenever the 1st string appears in the array, the browser thinks that the " is meant to close the points attribute.

Here's what you get to see in the browser:

<Chart points="{">Foo":100,"Bar":50}"</Chart>

How do I go about this? I have been struggling with this for hours now, and I can't wrap my head around it.

• Can't use " (double quotes) since the browser interprets it as the closing quote for an attribute and messes up the HTML
• Can't use ' (single quotes) since that's invalid JSON (and json_encode doesn't support it)

Solution 1

<Chart points='{!! json_encode($points) !!}'></Chart>

Just use singular quotes.

Solution 2

Although reading previous answers this took me a while to get working. So, here's what works for me with Laravel 5.5 and VueJs 2.5:

1. Convert your PHP array to a JSON serialized string.

   For PHP arrays see json_encode.
   For Eloquent collections see the Eloquent method toJson.
   For further reference we call this new JSON string $arrayAsJSON.

2. In your view (or Blade template):

   <some-vue-component :componentProperty="{{ $arrayAsJSON }}"></some-vue-component>
   

3. The Vue Component:

   <template></template>
   
   <script>
     export default {
   
       props: ['componentProperty'],
   
       mounted() {
           console.log('some-vue-component mounted.');
           console.log(this.componentProperty)
       },
     }
   </script>
   

Solution 3

Starting with Laravel 5.5 you can use the @json directive.

<Chart points=@json($points)></Chart>

Solution 4

Can use formal way:

<Chart points='<?php echo json_encode($points); ?>'></Chart>

View more solutions

Comments

[Jquestions]

Why the fudge is it single quotes? I've just struggled for hours battling this problem with double quotes, and this is actually the solution that worked. But.... I really don't understand what is happening here as they should be the same between single and double!

[Giorgio Tempesta]

It works as in the accepted answer but still needs single quotes around it in my case

[godbout]

You might be right. Might have mixed html and javascript tag.

[rijam]

This is because in JSON structures, keys and values are surrounded by double-quotes already, so using double-quotes to wrap the returned JSON structure will obliterate the rendered HTML with a malformed JSON blob kind of mixing the returned JSON and the element's attribute.

[terdelyi]

This is the wrong answer, I'm not sure why was it accepted. Check stackoverflow.com/a/48980512/623373