将数组传递到Laravel视图，并将该数组用作VueJS道具

Pass array to Laravel view and use that array as VueJS prop

本文关键字：数组 VueJS 道具 视图 Laravel      更新时间：2024-04-26

我有一个数组变量$screenshots，我正试图将它传递给我的Laravel视图。通常，我会使用@foreach并在数组中循环，但我想通过将整个数组定义为道具来将其传递给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

这是我的自定义组件（不同的文件）：

<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>

编辑：添加附件时，我使用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'));
}

这很有效-在网上很难找到这个答案，所以我希望它能有所帮助！你必须绑定它。

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

是的，我认为你不需要对每张票进行json_encode，但你明白了。

我认为Blade在编写{{ $ticket }}时会自动调用htmlentities()。由于$ticket不是字符串，因此它正在出错。尝试{{ json_encode($ticket) }}

您应该使用{!! json_encode($ticket) !!}}

我使用Laravel 7时遇到了同样的问题。我用这个解决方案做

 {!! json_encode($ticket) !!}}

也许还有更好的解决方案！！！

或者，在将$files数组传递给视图（即在控制器中）之前，使用collect($files)将其转换为Collection–这样，Laravel将实时为您处理JSON编码，因此您可以按照最初提出的方式将其绑定到组件的属性，即

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

已解决！您可以使用jsonencode函数将array|对象转换为json字符串。

<ticket-edit id="edit-ticket" 
             :single-ticket="{{ json_encode($ticket) }}" 
             screenshots="{{ json_encode($files) }}">
</ticket-edit>
相关文章：