将数组传递给 Laravel 视图并将该数组用作 VueJS 道具答案

【问题标题】：Pass array to Laravel view and use that array as VueJS prop将数组传递给 Laravel 视图并将该数组用作 VueJS 道具
【发布时间】：2016-08-02 05:55:02
【问题描述】：

我有一个数组变量$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'));
}

【问题讨论】：

你有没有想过这个问题？我被困在同一点

标签： javascript laravel vue.js

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

我更新了我的问题以表明我已经解码了attachments。当我在不解码附件的情况下尝试它时，控制台中出现错误Uncaught SyntaxError: Unexpected token u

【解决方案3】：

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

【讨论】：

它可以在 HTML 代码和更小的文件中更漂亮（如果您启用 Gzip，实际上不会太多）。当心！当您的内容包含 ' 或 " 时，这可能会导致问题，尤其是内容是由用户生成的。只有当您确切知道您不满足上述条件时才使用 {!! !!}。否则使用 {{ }} 转义字符串为了安全起见。
@spicydog 同意

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：