Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 7 down vote favorite

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'));
}
share|improve this question
    
Did you ever figure this out? I am stuck at the same point – Craig Iannazzi Jan 12 at 2:05
up vote 1 down vote accepted

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.

share|improve this answer
    
Sounds good to me! You're using Vue 2, right? – dericcain Jan 12 at 3:33
    
I am using vue 2 – Craig Iannazzi Jan 13 at 17:38
up vote 4 down vote

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

share|improve this answer
    
I updated my questions to show that I have already decoded the attachments. When I try it without decoding the attachments, I get an error in the console Uncaught SyntaxError: Unexpected token u – dericcain Apr 11 '16 at 21:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.