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

Pass PHP array onto Vue component using props

提问by weakdan

• Building a Laravel app with a few Vue components
• Want to pass a PHP array onto a Vue component using props

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

Here's an example of such PHP array:

这是此类 PHP 数组的示例：

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

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

Great. Here's my attempt at passing them onto the Chart component:

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

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

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

This looks fine, but the strings (Foo and Bar) inside the $pointsarray get encapsulated with " (double quotes) when using json_encode(). This means that whenever the 1st string appears in the array, the browser thinks that the " is meant to close the pointsattribute.

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

Here's what you get to see in the browser:

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

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

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

How do I go about this? I have been struggling with this for hours now, and I can't wrap my head around it.

我该怎么做？我已经为此苦苦挣扎了几个小时，我无法理解它。

• Can't use " (double quotes) since the browser interprets it as the closing quote for an attribute and messes up the HTML
• Can't use ' (single quotes) since that's invalid JSON (and json_encode doesn't support it)

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

回答by Igor Q.

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

Just use singular quotes.

只需使用单引号。

回答by Didi

Although reading previous answers this took me a while to get working. So, here's what works for me with Laravel 5.5 and VueJs 2.5:

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

1. Convert your PHP array to a JSON serialized string.

   For PHP arrays see json_encode.
   For Eloquent collections see the Eloquent method toJson.
   For further reference we call this new JSON string $arrayAsJSON.

2. In your view (or Blade template):

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

3. The Vue Component:

   <template></template>
   
   <script>
     export default {
   
       props: ['componentProperty'],
   
       mounted() {
           console.log('some-vue-component mounted.');
           console.log(this.componentProperty)
       },
     }
   </script>
   

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

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

2. 在您看来（或 Blade 模板）：

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

3. Vue 组件：

   <template></template>
   
   <script>
     export default {
   
       props: ['componentProperty'],
   
       mounted() {
           console.log('some-vue-component mounted.');
           console.log(this.componentProperty)
       },
     }
   </script>
   

回答by godbout

Starting with Laravel 5.5 you can use the @json directive.

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

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

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

回答by Mohsen

Can use formal way:

可以使用正式的方式：

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