title: Pass PHP array onto Vue component using props
body: <ul>
  <li>Building a Laravel app with a few Vue components</li>
  <li>Want to pass a PHP array onto a Vue component using props</li>
  </ul>
  
  <p>Here's an example of such PHP array:</p>
  
  <p><code>["Foo" =&gt; 100, "Bar" =&gt; 50]</code></p>
  
  <p>Great. Here's my attempt at passing them onto the Chart component:</p>
  
  <p><code>&lt;Chart points="{!! json_encode($points) !!}"&gt;&lt;/Chart&gt;</code></p>
  
  <p>This looks fine, but the strings (Foo and Bar) inside the <code>$points</code> array get encapsulated with " (double quotes) when using <code>json_encode()</code>. This means that whenever the 1st string appears in the array, the browser thinks that the " is meant to close the <code>points</code> attribute.</p>
  
  <p>Here's what you get to see in the browser:</p>
  
  <p><code>&lt;Chart points="{"&gt;Foo":100,"Bar":50}"&lt;/Chart&gt;</code></p>
  
  <p>How do I go about this? I have been struggling with this for hours now, and I can't wrap my head around it.</p>
  
  <ul>
  <li>Can't use " (double quotes) since the browser interprets it as the closing quote for an attribute and messes up the HTML</li>
  <li>Can't use ' (single quotes) since that's invalid JSON (and json_encode doesn't support it)</li>
  </ul>