使用 props 将 PHP 数组传递给 Vue 组件答案

【问题标题】：Pass PHP array onto Vue component using props使用 props 将 PHP 数组传递给 Vue 组件
【发布时间】：2018-04-23 02:59:36
【问题描述】：

用几个 Vue 组件构建一个 Laravel 应用程序
想要使用 props 将 PHP 数组传递给 Vue 组件

这是一个这样的 PHP 数组的例子：

["Foo" => 100, "Bar" => 50]

太好了。这是我将它们传递给 Chart 组件的尝试：

<Chart points="{!! json_encode($points) !!}"></Chart>

这看起来不错，但是在使用 json_encode() 时，$points 数组中的字符串（Foo 和 Bar）被封装为 "（双引号）。这意味着每当数组中出现第一个字符串时，浏览器都会认为" 意味着关闭 points 属性。

这是您在浏览器中看到的内容：

<Chart points="{">Foo":100,"Bar":50}"</Chart>

我该怎么做？我已经为此苦苦挣扎了好几个小时了，我无法解决这个问题。

不能使用 "（双引号），因为浏览器会将其解释为属性的结束引号并弄乱 HTML
不能使用 '（单引号），因为那是无效的 JSON（而且 json_encode 不支持它）

【问题讨论】：

["Foo": 100, "Bar": 50] 不是 PHP 数组。
@DarraghEnright 好地方，已修复。
你能试试:points='{!! json_encode($points) !!}'吗？另一种方法是将数组设置到您的 Vue / 组件 data，例如 data: { points: {!! json_encode($points) !!} } 并使用 :points="points"
points='{!! json_encode($points) !!}' 有效，但我不确定这是否被认为是无效或错误的 HTML？
@D.vanDrunen 如果任何值包含单引号，它可能会失败

标签： php arrays json laravel vue.js

【解决方案1】：

<Chart points='{!! json_encode($points) !!}'></Chart>

只需使用单引号。

【讨论】：

为什么软糖是单引号？我已经用双引号与这个问题斗争了几个小时，这实际上是有效的解决方案。但是....我真的不明白这里发生了什么，因为它们在单双之间应该是相同的！
这是因为在 JSON 结构中，键和值已经被双引号括起来，因此使用双引号来包装返回的 JSON 结构将使用格式错误的 JSON blob 混合来消除呈现的 HTML返回的 JSON 和元素的属性。
这是错误的答案，我不确定它为什么被接受。检查stackoverflow.com/a/48980512/623373

【解决方案2】：

虽然阅读了以前的答案，但我花了一段时间才开始工作。所以，这就是 Laravel 5.5 和 VueJs 2.5 对我有用的方法：

将您的 PHP 数组转换为 JSON 序列化字符串。

对于 PHP 数组，请参阅 json_encode。
对于 Eloquent 集合，请参阅 Eloquent 方法toJson。
为了进一步参考，我们将此新的 JSON 字符串称为 $arrayAsJSON。

在您看来（或 Blade 模板）：

<some-vue-component :componentProperty="{{ $arrayAsJSON }}"></some-vue-component>

Vue 组件：

<template></template>

<script>
  export default {

    props: ['componentProperty'],

    mounted() {
        console.log('some-vue-component mounted.');
        console.log(this.componentProperty)
    },
  }
</script>

【讨论】：

【解决方案3】：

可以使用正式的方式：

<Chart points='<?php echo json_encode($points); ?>'></Chart>

【讨论】：

【解决方案4】：

从 Laravel 5.5 开始，您可以使用 @json 指令。

<Chart points=@json($points)></Chart>

【讨论】：

它在接受的答案中工作，但在我的情况下仍然需要单引号
你可能是对的。可能混合了 html 和 javascript 标记。