I have an array variable $screenshots that I am trying to pass to my Laravel view. Usually, I would use the @foreach and loop through the array, but I want to pass the full array to a Vue component by defining it as a prop. I want to do this so that I can loop over the array in the component. I am getting the htmlentities() expects parameter 1 to be string, array given error.

What is the proper way to do this with VueJS and Laravel?

Here is my blade template:

@section('content')



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



    </ticket-edit>



@endsection

Here is my custom component (different file):

<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>

EDIT: When I am adding attachments, I am using json_encode to encode the path to the attachments. Then when I retrieve them, I run json_decode in my model like so $files = json_decode($ticket->screenshots); So my controller looks like this:

public function edit($sub_domain, $id)

{

    $ticket = Ticket::find($id);

    $files = json_decode($ticket->screenshots);



    return view('templates.tickets-single', compact('ticket', 'files'));

}