I am working on Laravel / Vue project.
Inside blade i am including <account-users /> vue component. This component is performing a ajax call to get all the account users and show them in table.
Currently I am working / testing the app locally.
What I am noticing is that the the component ajax is receiving and displaying the data before the whole page has been fully loaded.
That can be easily seen if I duplicate the tab in chrome or if I right click to view the page source, what I first see is something like this (chrome auto formats the jason) :
[
{
"name": "25 person",
"email": "[email protected]",
"email_verified_at": null,
"id": 49,
"is_active": 0,
"roles": [
{
"name": "Foreman",
"id": 3,
"pivot": {
"model_id": 49,
"role_id": 3,
"model_type": "App\User"
}
}
],
"companies": [
{
"name": "Test company",
"id": 1,
"pivot": {
"user_id": 49,
"company_id": 1
}
Only after I refresh the page, the whole page gets displayed correctly.
From what I understand, the <account-user /> data is loaded before browser renders the whole html.
In vue component, the mounted() function triggers the data load function.
This really wouldn't be an application that I would want to post publicly for few reasons:
The reason why I want vue to render the table data is so all the crud functionality can be done via ajax (no page reloads).
Please let me know your thoughts on what would be the recommended way to render the data through vue, so I can have the crud functionality through ajax.
@guntarsv Sounds like you might need to use the v-cloak directive. You can add it directly to your app' s mounted root element. The documents state its only for mustache bindings, but it's worth giving it a try.
https://vuejs.org/v2/api/#v-cloak
https://stackoverflow.com/questions/42262007/hiding-vue-js-template-before-it-is-rendered
Thank you @talinon , I will research v-clock, perhaps that will be the best solution. Talinon, what is your professional opinion, is having the vue component to load the needed data, a good approach/safe?
Few reasons why this approach is appealing to me:
The other option that I see, would be to inject the table data into vue component, at the moment I am not sure what is better..
@guntarsv There is absolutely nothing wrong with having your component make the ajax calls. That is one of the great things about components - they are like containers where logic and styling can be self contained. It also keeps your app well structured and cleans up your root/parents by moving code into a child component that can be solely responsible for the functionality.
I always look for ways to refactor stuff out of the "root" and into components whenever possible. I might opt for making ajax calls in the parent if it makes sense to do so, such as I need to work with that data across multiple components. Otherwise, I try to encapsulate it as best as I can in sub components.
Just to elaborate a little more, I think part of the reason why I was seeing the JSON before full page load was in the UserController
public function index()
{
if(\request()->ajax()){
return User::with('roles:name,id','companies:name,id')->select('name','email','email_verified_at','id','is_active')
->whereAccountId(Auth::user()->account_id)->OrderBy('name')->get();
}
return view('account.administration.users');
}
I am dual purposing the index method in my controller. If it is called via GET in browser, it will return view, but if the same method is called via ajax, it will return user collection.
I kind of like this approach, It seems cleaner and I can still use Route::resource with ajax and regular GET.
I am thinking to add additional param when doing a ajax call, something like this: if(\request()->ajax() && \request->()->ajax == true)
Any thoughts / suggestions...
This happens when cache ajax request, and you have used same url to load component and to get the ajax data. Just change ajax request url to something else or just add some GET parameter like ?ajax=true to differentiate it from the other url. That's it, and it won't happen again.
Please or to participate in this conversation.