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)

Could you try :points='{!! json_encode($points) !!}'? The alternative would be to set the array into your Vue / component data, eg data: { points: {!! json_encode($points) !!} } and use :points="points" — Phil
– Phil, Commented Nov 9, 2017 at 23:36
points='{!! json_encode($points) !!}' works, however I'm uncertain if this is considered invalid or bad HTML? — weakdan
– weakdan, Commented Nov 9, 2017 at 23:39
@D.vanDrunen it would probably fail if any of the values contained a single-quote — Phil
– Phil, Commented Nov 9, 2017 at 23:43

Igor Q. · Accepted Answer · 2017-11-09 23:47:13Z

11

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

Just use singular quotes.

answered Nov 9, 2017 at 23:47

Igor Q.

72811 silver badges23 bronze badges

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

4 Comments

Jquestions Over a year ago

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!

rijam Over a year ago

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 Over a year ago

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

Pablo Over a year ago

Hands up if you're here in 2022

Omar Einea · Accepted Answer · 2018-02-26 03:46:23Z

9

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:

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.

In your view (or Blade template):

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

The Vue Component:

<template></template>

<script>
  export default {

    props: ['componentProperty'],

    mounted() {
        console.log('some-vue-component mounted.');
        console.log(this.componentProperty)
    },
  }
</script>

edited Feb 26, 2018 at 3:46

Omar Einea

2,5327 gold badges25 silver badges36 bronze badges

answered Feb 26, 2018 at 2:07

Didi

911 silver badge2 bronze badges

Comments

Mohsen · Accepted Answer · 2018-02-26 03:49:15Z

4

Can use formal way:

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

answered Feb 26, 2018 at 3:49

Mohsen

4,2451 gold badge34 silver badges33 bronze badges

Comments

godbout · Accepted Answer · 2018-11-19 06:46:56Z

4

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

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

answered Nov 19, 2018 at 6:46

godbout

1,8151 gold badge14 silver badges11 bronze badges

2 Comments

Giorgio Tempesta Over a year ago

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

godbout Over a year ago

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

Collectives™ on Stack Overflow

Pass PHP array onto Vue component using props

4 Answers 4

4 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related