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

新手上路,请多包涵
  • 使用一些 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 许可协议

阅读 721
2 个回答
<Chart points='{!! json_encode($points) !!}'></Chart>

只需使用单引号。

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

尽管阅读了以前的答案,但这花了我一段时间才能开始工作。所以,以下是 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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题