使用 props 将 PHP 数组传递到 Vue 组件

Question

• 使用一些 Vue 组件构建 Laravel 应用程序
• 想要使用 props 将 PHP 数组传递到 Vue 组件

下面是此类 PHP 数组的示例：

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

伟大的。这是我将它们传递到图表组件的尝试：

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

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

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

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

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

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

原文由 weakdan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

只需使用单引号。

原文由 Igor Q. 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尽管阅读了以前的答案，但这花了我一段时间才能开始工作。所以，以下是 Laravel 5.5 和 VueJs 2.5 对我有用的东西：

1. 将 PHP 数组转换为 JSON 序列化字符串。

对于 PHP 数组，请参阅 json_encode 。

对于 Eloquent 集合，请参阅 Eloquent 方法 toJson 。

为了进一步参考，我们将这个新的 JSON 字符串 $arrayAsJSON 。

1. 在您的视图（或 Blade 模板）中：

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

1. Vue 组件：

    <template></template>

   <script>
     export default {

       props: ['componentProperty'],

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

原文由 Didi 发布，翻译遵循 CC BY-SA 3.0 许可协议