Passing model through a prop, or getting it by an API?

I have a web application, where users can upload different documents. I have a model, simply called Document.

I then have an index view, so users can view all their uploaded documents:

index.blade.php

@foreach($documents as $document)
   <ul>
      <li><a href="#" @click="$modal.show('showDocument', {document: json_encode($document)})">{{$document->name}}</a></li>
   </ul>
@endforeach

Now, I want to do so when users click on a specific document, a modal will open up on the current page. This is done with the following Vue code:

@click="$modal.show('showDocument', {document: json_encode($document)})"

This works fine. The modal opens up and the document object is attached to it.

My question is - is this the best approach? Consider I have 50 uploaded documents and on top of that, I would need to access relationship data on the Document model.

Another approach I have been thinking about was simply just to pass the id of the document to the modal, and then simply GET the document information by an API when the modal is loading:

@click="$modal.show('showDocument', {documentId: '$document->id'})"

And then, on the Vue view:

getDocument: function () {
      axios.get(this.route).then((response) => {
                this.document = response.data.document;
      }).catch(error => {
                console.log(error);
                this.document = {};
      })
},

Not sure if it really makes any difference (performance or design-pattern wise?)

Any input is appreaciated!

oliverbusk

6 years ago

Level 5

This is what I settled for:

I pass the documents id through to the modal:

@click="$modal.show('showDocument', {document: '{{($document->id)}}'})"

In my controllers show method, I have this:

public function show(Document $document)
{
  
    return response()->json([
            'document'    => $document,
    ], 200);
}

In my Vue view, the axios get request is simply hitting the show method:

getDocument: function (document) {
      axios.get('documents'/ + document).then((response) => {
                this.document = response.data.document;
      }).catch(error => {
                console.log(error);
      })
},

To ensure that this specific show method can only be accessed from an AJAX request, I have created a custom middleware:

RequestIsAjax.php:

    public function handle($request, Closure $next)
    {
        if (! $request->ajax())
            return abort(403);

        return $next($request);
    }

And applied it to my controller, like so:

$this->middleware('ajax', ['only' => ['show']]);

Above seems to be working. However, I am still unsure if this is the most optimal way to go about this? Any input would be appreciated!

Please or to participate in this conversation.