web-dev-qa-db-ja.com

配列をLaravelビューに渡し、その配列をVueJSプロップとして使用します

Laravelビューに渡そうとしている配列変数_$screenshots_があります。通常、_@foreach_を使用して配列をループしますが、完全な配列をVueコンポーネントにプロップとして定義して渡します。これを行うと、コンポーネント内の配列をループできるようになります。htmlentities() expects parameter 1 to be string, array givenエラー。

VueJSとLaravelでこれを行う適切な方法は何ですか？

これが私のブレードテンプレートです。

_@section('content')

    <ticket-edit id="edit-ticket" single-ticket="{{ $ticket }}" screenshots="{{ $files }}">

    </ticket-edit>

@endsection
_

これが私のカスタムコンポーネント（別のファイル）です。

_<script>
    export default {

        template: '#edit-ticket-template',

        props: ['SingleTicket', 'screenshots'],

        data: function() {
            return {
                ticket: [],
                screenshots: []
            };
        },

        methods: {
            getTicket() {
                return this.ticket = JSON.parse(this.SingleTicket);
            },

            getScreenshots() {
                return this.screenshots = JSON.parse(this.files);
            },

            createNotes: function () {
                var ticketNotes = $('.summernote');
                ticketNotes.summernote({
                    height: 260,
                    toolbar: [
                        ['style', ['bold', 'italic', 'underline', 'clear', 'strikethrough']],
                        ['fontsize', ['fontsize']],
                        ['para', ['ul', 'ol']],
                    ]
                });
            }
        },

        created: function() {
            this.getTicket();
            this.getScreenshots();
        },

        ready: function() {
            this.createNotes();
        }

    }
</script>
_

編集：添付ファイルを追加するとき、_json_encode_を使用して添付ファイルへのパスをエンコードしています。次に、それらを取得するときに、モデルで_json_decode_を次のように実行します$files = json_decode($ticket->screenshots);したがって、コントローラーは次のようになります。

_public function edit($sub_domain, $id)
{
    $ticket = Ticket::find($id);
    $files = json_decode($ticket->screenshots);

    return view('templates.tickets-single', compact('ticket', 'files'));
}
_
javascriptlaravelvue.js
14
dericcain

これはうまくいきます-この答えをウェブ上で見つけるのは難しかったので、それが役に立てば幸いです！あなたはそれを縛らなければならない。

 <edit-ticket-template
      v-bind:SingleTicket="{{  json_encode($ticket) }}"
      v-bind: screenshots ="{{  json_encode($files) }}"
  >
  </edit-ticket-template>

ええ、私はあなたが単一のチケットをjson_encodeする必要はないと思いますが、あなたは要点を得ます。

18
Iannazzi

あなたが_{{ $ticket }}_を書くと、Bladeは自動的にhtmlentities()を呼び出すと思います。 _$ticket_は文字列ではないため、エラーになります。 {{ json_encode($ticket) }}をお試しください

5
Jeff

{!! json_encode($ticket) !!}}を使用する必要があります

1
danial dezfooli