How can I pass a JSON string as a prop?

0
votes

I am using Vue.js with Shopify, and I'm hoping to pass objects from Liquid into a Vue component as a prop. For example, if I register the Vue component product-tile, and I want to use Shopify's product object in Liquid and convert it directly into an object in Vue, I would like to be able to do something like this:

<product-tile product='{{ product | json }}'></product-tile>

Note that the curly brackets here are Liquid and not Vue, I'm using delimiters. My current workaround is to put the data I need in hidden input fields that I then pull in from the DOM after the component is mounted, but being able to pass the Liquid directly into the Vue component would be a much cleaner solution.

I get errors with the above code because Vue doesn't seem to like a JSON string being passed in as a prop in this way. The specific error is:

Template compilation error: Unquoted attribute value cannot contain U+0022 ("), U+0027 ('), U+003C (<), U+003D (=), and U+0060 (`).

Is there a other way to accomplish this without my current workaround?

1
javascriptvue.jsshopifyliquidvuejs3
That’s because you’re inserting a raw JSON into the prop, and the characters in it are reserved for HTML. This feels like an XY a problem: why can’t you fetch the product data using Ajax? – Terry
I could fetch using AJAX, however given how Shopify's AJAX API works and the fact that this component appears multiple times on a page I would have to make dozens of API calls for data that I already have available in the template on page load. It feels like it would be far more efficient if I could pass this data directly into the Vue component as a prop. – samason

1 Answers

0
votes
<product-tile :product="product"></product-tile>

<product-tile :product="JSON.parse(product)"></product-tile>

and define prop as

props: {
  product: Object
}