首页 文章

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

提问于
浏览 次
5

  • 使用一些Vue组件构建Laravel应用程序

  • 想要使用props将PHP数组传递到Vue组件上

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

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

大 . 这是我尝试将它们传递给Chart组件：

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

这看起来很好，但 $points 数组中的字符串（Foo和Bar）在使用 json_encode() 时用“（双引号）”封装 . 这意味着只要第一个字符串出现在数组中，浏览器就会认为“意图关闭” points 属性 .

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

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

我该怎么做？我一直在努力奋斗几个小时，我无法绕过它 .

  • 不能使用“（双引号），因为浏览器会将其解释为属性的结束引用并弄乱HTML

  • 可't use '（单引号），因为's invalid JSON (and json_encode doesn' t支持它）

php arrays json laravel vue.js

4 回答

  • 1

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

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

    回复于
  • 4

    可以使用正式方式：

    <Chart points='<?php echo json_encode($points); ?>'></Chart>
    回复于
  • 2

    虽然阅读以前的答案，但这需要一段时间才能开始工作 . 所以，这对Laravel 5.5和VueJs 2.5来说对我有用：

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

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

    • 在您的视图（或刀片模板）中：
    <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>
    回复于
  • 0
    <Chart points='{!! json_encode($points) !!}'></Chart>

    只需使用单数引号 .

    回复于

相关问题