I have page that has v-tabs using the nuxt attribute, each tab directs to a dynamic route
cars/_brand_name/index.vue (making the _brand_name a mandatory parameter)
When I load the page /cars/bmw: mounted get's called successfully but after switching to other tabs the URL updates correctly but the page no longer re-renders, mounted no longer getting called.
Am I missing some part of the lifecycle? Should I be watching the route param and force the page to reload? I don't remember needing to do this with Vue alone.
This is often caused when the route component is the same as previous route. The best way to force Vue to re-render the page is to set a :key attribute on the router with a unique value, it is common to use $route.fullPath.
Update your router view like so.
<router-view :key="$route.fullPath"></router-view>
Related
The problem
I am trying to make a dynamic app sidebar to react and refresh when a new content category is created. However emitTo('docs.sidebar', 'refresh') to 'docs.sidebar' component is not working.
I have found out that when i start typing into input field - component 'docs.sidebar' disappears from loaded components in debugbar. Which obviously means that something refreshed in whole layout and the only component remains is the 'docs.create-category'.
Component 'docs.sidebar' has $listener for refresh included and is included in main layout using livewire directive.
#livewire('docs.sidebar')
And the component 'docs.create-category' is a full page component using the main layout where 'docs.sidebar' is included.
What have i tried?
I have tried to add wire:ignore and wire:ignore.self in both correlating components various places, however that did no help.
Attaching screen recording to see problem visually.
https://youtu.be/kkOrgQXVyGo
Views:
Layout: https://paste.laravel.io/7dfe2b11-e7c9-4905-a644-133c783e8ba6
Create category component: https://paste.laravel.io/92ea800a-96bc-4286-aedc-f16a65aa4e3f
I implemented a simple crud application in two ways.
One with Laravel and Vue and one with Laravel, Vue and Inertia.
When rendering a simple user list in my Vue/Laravel application (either with routing or initial page load), Vue renders the whole page instantly and loads the user list as soon as it receives it from the server. -> good user experience, possibility to implement a loading indication
When rendering the same thing in my inertia application, Vue renders the whole page after the data has been received from the server. Which is a very bad thing for applications with large amounts of data.
Even in my really small/slim application, I felt the difference and figured this out with a simple sleep(3) before returning the view (or Inertia::render) in my UserController.
Is this normal/is there a way to prevent this? Or did I possibly implement inertia poorly?
I'm using inertia.js 0.8.5, inertia-vue 0.5.5 and Vue 2.6.12
Normally, if you want to display lists of users with Inertia, you'd paginate the list server-side with Laravel's built-in pagination. If the page load time is slow, you're probably trying to load too much data/missing eager loads/missing DB indexing/doing some calculation that can be optimized.
You can use Progress Indicator to improve the UX when navigating between Inertia views. Does it make a difference to the user if they see an empty table in an SPA with ajax calls before the data loads vs. seeing a progress bar before the view reloads? IMO not really.
If for some reason in a particular view it's really important to have the table layout (or some other empty data container) displayed, even if it's empty for some time, you can always load the data with ajax in that one-off case. Not all data in an Inertia app needs to be "pushed" to the view from the controller, you can also "pull" it from Vue/React side.
I want to implement react js to different pages of my website,
e.g
in home page, registration, login, etc.
all tutorial i have seen it only uses 1 app.js how can i achieve this
to multi page app.
P.S i am using laravel elixir and i combine them into 1 main.js.
Add a mounting point in the pages that you want your React App to be mounted.
e.g.
// main.js
ReactDOM.render(<App props={/* props from somewhere */}/>, document.getElementById('mountingPoint') );
// rendered HTML from pages should have
<div id="mountingPoint"></div>
I found this https://github.com/christianalfoni/react-webpack-cookbook/wiki/Multiple-entry-points
I think this is more appropriate on what i need and then i will just map the file
name in my laravel app.
this way i dont need to load the js code for contact_us.php to login.php
You could also use something like React Habitat to make this architecture easier.
With it, you could just define a container of your components so they resolve in your DOM.
For example, in your javascript you would do
import MyComponent from './Components/MyComponent';
...
container.register(MyComponent).as(myComponent);
Then in any of your HTML pages
<div data-component="myComponent"></div>
It also supports multiple containers and async code splitting.
I'm developping a jqm application with spring mobile in the back-end.
Whenever I hit the browser refresh button on my mobile phone the page is completely devastated afterwards. Browsers back-button works properly.
The data are still available due prg pattern (flashAttributes in Spring) after refresh. Only the view is malformed.
Any ideas how to solve this problem?
From jQuery Mobile docs :
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pageinit event (details below) to run necessary code when a specific page is created (which can be determined by its id attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax
So what happens is - in jQuery Mobile, the scripts and styles defined in the head are loaded only once. So, in normal conditions, it works fine, as all the pages will use the scripts loaded from the first page.
But. When you refresh a page in-between, it triggers a page-reload instead of the ajax navigation model thatjqm uses. So all the scripts and styles loaded from the first page will not be included from here on out.
What you need to do is "reference the same set of stylesheets and scripts in the head of every page", so that even if you hit refresh in the middle, the scripts and styles that had been loaded from the head of the first page are loaded again.
I recommend you read the docs from the above link fully to gain a better understanding.
I am adding some functionality to an existing Microsoft MVC 3 application. I cannot change the existing structure of the app itself while I do need to add some new functionality to the page. I have angular running in a div (hidden on load via jquery dialog). The MVC app has several tabs on the page. Each time a tab is chosen, the a partial cshtml (razor) loads. Along with that partial, my angular template is included. The partial references a js file that contains the angular controller. When it is first loaded and the user opens the tab and open the jquery dialog containing angular, everything works fine. I started to notice some funny behavior after the changes are saved. I noticed the same irregular behavior if I closed the dialog containing the angular template, switched to another tab, then switched back to the tab containing the angular template. Here's what is happening:
The partial being loaded by MVC reloads the angular template which initiates the angularjs controller method in the referenced js file
A new $scope is being generated each time this occurs.
Each time a controller method is invoked (via ng-click event tied to a button on the template) teh method will execute n number of times with n being the number of times the partial has been loaded since the last full page refresh.
I proved this method by logging the $scope object to the window in the start of the controller method
window['scope_' + new Date().getTime().toString()] = $scope;
After each partial page load, a new $scope object is logged to the window. Pressing a button on the template invoked a certain method tied to the ng-click event. This event fires multiple times. But calling the method manually in the console using the oldest recorded scope object in the window
scope_1378413848781.$apply(scope_1378413848781.getSomeData())
it works as intended. So, my question is, how do I prevent the controller from adding a new scope every time the MVC framework reloads the partial?
Here are some of the things I've tried that didn't work:
Adding a global flag and exiting the controller method if it was set
moving the controller reference to the _layout.cshtml file
destroying the scope when the dialog containing the template is closed
One final note, I am not using the angular route provider which I know can cause the controller to execute twice when used in conjunction with .
It appears that Angularjs was not meant to be used in this fashion. Per the angular docs:
You can use Angular to develop both single-page and round-trip apps, but Angular is designed primarily for developing single-page apps...You normally wouldn't want to load Angular with every page change, as would be the case with using Angular in a round-trip app.
To resolve the issue, I moved the angular template as well as the reference to the controller and angular.min.js to the shared _Layout.cshtml file. This partial file loads first and is only reloaded when the entire page is refreshed. Adding angular references and loading controllers in js files referenced in asp.net mvc 3 partials will cause scope replication that can be difficult to detect.