将数组传递给 Laravel 视图并将该数组用作 VueJS 道具 [英] Pass array to Laravel view and use that array as VueJS prop

问题描述

我有一个数组变量 $screenshots 我正试图将它传递给我的 Laravel 视图.通常，我会使用 @foreach 并遍历数组，但我想通过将其定义为 prop 将完整数组传递给 Vue 组件.我想这样做，以便我可以遍历组件中的数组.我得到 htmlentities() 期望参数 1 为字符串，数组给定 错误.

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.

使用 VueJS 和 Laravel 执行此操作的正确方法是什么?

What is the proper way to do this with VueJS and Laravel?

这是我的刀片模板:

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

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

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

推荐答案

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

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>

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

Yeah I don't think you need to json_encode the single ticket but you get the point.

这篇关于将数组传递给 Laravel 视图并将该数组用作 VueJS 道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！