Prześlij tablicę do widoku Laravel i użyj tej tablicy jako VueJS prop

Question

Mam zmienną tablicową $screenshots, którą próbuję przekazać do mojego widoku Laravel. Zwykle używałbym @foreach i przechodziłbym przez macierz, ale chcę przekazać pełną tablicę do komponentu Vue, definiując go jako rekwizyt. Chcę to zrobić, aby móc przechodzić przez tablicę w komponencie. Otrzymuję błąd htmlentities() expects parameter 1 to be string, array given.

Jaki jest właściwy sposób, aby to zrobić z VueJS i Laravel?

Oto mój szablon Ostrze:

@section('content') 

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

    </ticket-edit> 

@endsection 

Oto mój zwyczaj składnik (inny plik):

<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: Kiedy dodaję załączników, używam json_encode kodować ścieżka do załączników. Potem, kiedy je odzyskać, biegnę json_decode w moim modelu jak tak $files = json_decode($ticket->screenshots); Więc mój kontroler wygląda następująco:

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

To działa - ciężko było znaleźć tę odpowiedź w Internecie, więc mam nadzieję, że pomoże! Musisz to powiązać.

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

Tak, nie sądzę, że trzeba json_encode biletu pojedynczego, ale masz rację.

Answer 2

myślę Blade wzywa htmlentities() automatycznie podczas pisania {{ $ticket }}. Ponieważ $ticket nie jest łańcuchem, jest to błąd. Wypróbuj {{ json_encode($ticket) }}

Answer 3

Powinieneś użyć {!! json_encode($ticket) !!}}