如何将 JSON 字符串作为道具传递？

Question

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?

Answer 1

Looking at uicrooks/shopify-foundation-theme , they were able to make it work with an extra filter.

<product-tile :product="{{ product | json | replace: '"', "'" }}" />

Answer 2

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

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

and define prop as

props: {
  product: Object
}