将数组传递给Laravel视图并将该数组用作VueJS prop

der*_*ain 14 javascript laravel vue.js

我有一个数组变量$screenshots,我试图传递给我的Laravel视图.通常,我会使用@foreach和循环遍历数组,但我想通过将其定义为prop来将完整数组传递给Vue组件.我想这样做,以便我可以遍历组件中的数组.我收到了htmlentities() expects parameter 1 to be string, array given错误.

用VueJS和Laravel做这个的正确方法是什么?

这是我的刀片模板:

@section('content')

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

    </ticket-edit>

@endsection
Run Code Online (Sandbox Code Playgroud)

这是我的自定义组件(不同的文件):

<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>
Run Code Online (Sandbox Code Playgroud)

编辑:当我添加附件时,我json_encode用来编码附件的路径.然后,当我检索它们时,我会json_decode像我一样在我的模型中运行$files = json_decode($ticket->screenshots);所以我的控制器看起来像这样:

public function edit($sub_domain, $id)
{
    $ticket = Ticket::find($id);
    $files = json_decode($ticket->screenshots);

    return view('templates.tickets-single', compact('ticket', 'files'));
}
Run Code Online (Sandbox Code Playgroud)

Ian*_*zzi 18

这有效 - 很难在网上找到这个答案,所以我希望它有所帮助!你必须绑定它.

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

是的,我不认为你需要json_encode单票,但你明白了.


Jef*_*eff 5

我认为Blade会htmlentities()在你写的时候自动调用{{ $ticket }}.既然$ticket不是字符串,那就错了.尝试{{ json_encode($ticket) }}