Pass array to Laravel view and use that array as VueJS prop

Question

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')); } 

Answer 1

This works - it was hard to find this answer on the web so I hope it helps! You have to bind it.

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

Yeah I don't think you need to json_encode the single ticket but you get the point.

Answer 2

I think Blade calls htmlentities() automatically when you write {{ $ticket }}. Since $ticket is not a string, it is erroring. Try {{ json_encode($ticket) }}