title: Pass array to Laravel view and use that array as VueJS prop
body: <p>I have an array variable <code>$screenshots</code> that I am trying to pass to my Laravel view. Usually, I would use the <code>@foreach</code> 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 <code>htmlentities() expects parameter 1 to be string, array given</code> error. </p>
  
  <p>What is the proper way to do this with VueJS and Laravel?</p>
  
  <p>Here is my blade template:</p>
  
  <pre><code>@section('content')
  
      &lt;ticket-edit id="edit-ticket" single-ticket="{{ $ticket }}" screenshots="{{ $files }}"&gt;
  
      &lt;/ticket-edit&gt;
  
  @endsection
  </code></pre>
  
  <p>Here is my custom component (different file):</p>
  
  <pre><code>&lt;script&gt;
      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();
          }
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong> When I am adding attachments, I am using <code>json_encode</code> to encode the path to the attachments. Then when I retrieve them, I run <code>json_decode</code> in my model like so <code>$files = json_decode($ticket-&gt;screenshots);</code> So my controller looks like this:</p>
  
  <pre><code>public function edit($sub_domain, $id)
  {
      $ticket = Ticket::find($id);
      $files = json_decode($ticket-&gt;screenshots);
  
      return view('templates.tickets-single', compact('ticket', 'files'));
  }
  </code></pre>