Vượt qua mảng để xem Laravel và sử dụng mảng đó như VueJS prop

Question

Tôi có một biến mảng $screenshots mà tôi đang cố gắng chuyển đến chế độ xem Laravel của mình. Thông thường, tôi sẽ sử dụng @foreach và lặp qua mảng, nhưng tôi muốn chuyển mảng đầy đủ đến một thành phần Vue bằng cách xác định nó như một giá trị. Tôi muốn làm điều này để tôi có thể lặp qua mảng trong thành phần. Tôi gặp lỗi htmlentities() expects parameter 1 to be string, array given.

Cách thích hợp để thực hiện điều này với VueJS và Laravel là gì?

Đây là mẫu lưỡi của tôi:

@section('content') 

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

    </ticket-edit> 

@endsection 

Đây là thành phần tùy chỉnh của tôi (tập tin khác nhau):

<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: Khi tôi thêm file đính kèm, tôi đang sử dụng json_encode để mã hóa đường dẫn đến tệp đính kèm. Sau đó, khi tôi lấy chúng, tôi chạy json_decode trong mô hình của tôi như vậy $files = json_decode($ticket->screenshots); Vì vậy, điều khiển của tôi trông như thế này:

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

Tác phẩm này - thật khó để tìm thấy câu trả lời này trên web vì vậy tôi hy vọng nó sẽ hữu ích! Bạn phải ràng buộc nó.

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

Vâng tôi không nghĩ rằng bạn cần phải json_encode vé duy nhất nhưng bạn nhận được điểm.

Answer 2

Tôi nghĩ Blade gọi htmlentities() tự động khi bạn viết {{ $ticket }}. Kể từ $ticket không phải là một chuỗi, nó là lỗi. Hãy thử {{ json_encode($ticket) }}

Answer 3

Bạn nên sử dụng {!! json_encode($ticket) !!}}