javascript - 如何将 JSON 字符串作为 Prop 传递？

Question

我在 Shopify 中使用 Vue.js，我希望将对象从 Liquid 传递到 Vue 组件作为 Prop 。例如，如果我注册了 Vue 组件 product-tile，并且我想使用 Shopify's product object in Liquid并将其直接转换为 Vue 中的对象，我希望能够执行如下操作:

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

请注意，这里的大括号是 Liquid 而不是 Vue，我使用的是 delimiters .我目前的解决方法是将我需要的数据放在隐藏的输入字段中，然后在安装组件后从 DOM 中提取这些数据，但是能够将 Liquid 直接传递到 Vue 组件将是一个更简洁的解决方案。

我在上面的代码中遇到了错误，因为 Vue 似乎不喜欢以这种方式将 JSON 字符串作为 prop 传入。具体报错是:

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

如果没有我当前的解决方法，是否还有其他方法可以实现此目的？

Answer 1

查看uicrooks/shopify-foundation-theme ，他们能够使用额外的过滤器使其工作。

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