Question

我正在构建一个输出可排序列表的组件，其中内置了一些ajax crud。这只是一个简单的组件，我想放到我的页面上。

我正在努力弄清楚如何将现有的项目列表放入组件中。

我的页面是使用PHP构建的，我已经为列表提供了一系列项目。到目前为止，我发现读取数据的唯一方法是使用json_encode将数据输出到页面中的dom，然后使用我的组件读取它。

<script>
    window.faqs = <?= json_encode($provider->get('provider_faqs'));?>
</script>

我更喜欢将json作为prop传递给组件，就像我对关联的id字段一样。

<bbf-faqs v-bind:provider-id="<?= $provider->get('id')?>"></bbf-faqs>

然而，当我尝试传递json时，我的组件无法理解它，只输出字符串。 VueJS也没有抱怨我没有定义道具。

有没有办法将对象作为道具传递？理想情况下，我不希望组件为数据提供ajax，但如果涉及到这一点，我认为它必须这样做。

Answer 1

我找到了解决方案，实际上它实际上是一个简单的疏忽。

当我使用我的Vue标签时，我使用双引号分配HTML属性，这些引号未在我的json字符串中转义。因此，由于额外的双引号，我的标签会破裂。

因此，从<bbf-faqs data="<?= json_encode($stuff);?>">更改为<bbf-faqs data='<?= json_encode($stuff);?>'>已解决了问题。

另一个选项，可能更合适的是转义json编码中的引号。

还值得注意的是，如果你在传递它的json上使用v-bind，它将被自动计算到一个数组，而不需要JSON.parse

这种注入方法的另一个问题是prop不是数据，因此没有任何数据绑定。

我不认为这是可能的，所以我将使用dom变量方法

Answer 2

使用JSON.parse（）将您的字符串转换为JavaScript对象。