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