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

【问题标题】：How can I pass a JSON string as a prop?如何将 JSON 字符串作为道具传递？
【发布时间】：2021-05-03 19:57:02
【问题描述】：

我在 Shopify 中使用 Vue.js，我希望将 Liquid 中的对象作为道具传递到 Vue 组件中。比如我注册了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 传入。具体错误是：

模板编译错误：未加引号的属性值不能包含 U+0022 (")、U+0027 (')、U+003C (

如果没有我目前的解决方法，还有其他方法可以完成此任务吗？

【问题讨论】：

那是因为您将原始 JSON 插入到 prop 中，其中的字符是为 HTML 保留的。这感觉就像一个 XY 问题：为什么不能使用 Ajax 获取产品数据？
我可以使用 AJAX 获取，但是考虑到 Shopify 的 AJAX API 的工作方式以及该组件在页面上多次出现的事实，我将不得不对我已经拥有的数据进行数十次 API 调用页面加载时的模板。如果我可以将这些数据作为道具直接传递到 Vue 组件中，感觉会效率更高。

【解决方案1】：

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

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

并将 prop 定义为

props: {
  product: Object
}

【讨论】：