web-dev-qa-db-ja.com

PHP array to Vue component using props

  • LaravelアプリをいくつかのVueコンポーネントで構築する
  • 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はそれをサポートしていない）
phparraysjsonlaravelvue.js
7
weakdan
<Chart points='{!! json_encode($points) !!}'></Chart>

単数引用符を使用してください。

8
Igor Q.

以前の回答を読んでいましたが、これが機能するまでに少し時間がかかりました。したがって、Laravel 5.5およびVueJs 2.5を使用して動作するのは次のとおりです。

  1. PHP配列をJSONシリアル化文字列に変換します。

    PHP配列については json_encode を参照してください。
    Eloquentコレクションについては、Eloquentメソッド toJson を参照してください。
    さらに参照するために、この新しいJSON文字列を$arrayAsJSON。

  2. ビュー（またはブレードテンプレート）で：

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

  3. Vue Component：

    <template></template>

<script>
  export default {

    props: ['componentProperty'],

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

Laravel 5.5以降では、@ jsonディレクティブを使用できます。

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

3
godbout

正式な方法を使用できます：

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