What can I do with this lifecycle hook?
In Vue, I want to delete values from an array and save new ones, but it wont show, if I don't refresh the page. Can I refresh it without reloading the page with this life cycle hook?
Related
I am working on implementing nested tab view using custom tab component in Vue. When I refresh or reload the page for nested child tab, no active tab is shown. My question is how to show the active parent tab when page is refreshed/reloaded for the correct active child tab. Here I am providing the code to understand better.
https://codesandbox.io/s/morning-leaf-zxlt7?file=/src/components/TabView.vue
To clarify more, Suppose, I am browsing here to Operation 2 Under the Operation Tab
Now, when I refresh the page, I got this-
I need to click the parent tab (Operation Tab) to see the active Child Tab (Operation 2)
Please, help me to solve this problem. Thank you.
If i'm understanding correctly, your goal here is to keep the selected tabs open after reloading/refreshing the page. In that case you need to store the state of that component by creating new items in localStorage manually by calling localStorage.setItem('key', 'value') and then grabbing that values back in the mounted() lifecycle hook of your component with localStorage.getItem('key', 'value'). Alternatively you can use use Vuex with vuex-persist plugin that will handle saving and loading the state of your app for you.
After your edit, it seems that you want the app to go to a specific route after a refresh. Perhaps you could implement vue-router, and save the most recent route in localstorage, then re-route the user to said most recent route when the app is refreshed.
You would need: implement vue-router so that the open tabs are saved into the route, use hooks or mixin to save most recent route to localstorage, use created() hooks in App.Vue to load the most recent route (if any) and use programmatic navigation to push user to the loaded most recent route.
Let's suppose I have a component called FirstPage, which is my default route, now FirstPage triggers an asynchronous call, with the help of an action of the vuex store, to be made each minute to a backend Api (it's triggered when the component is loaded as a route), now let's say I go to an about route that goes to an About component, is FirstPage still making the calls?
Edit:
I'm not developing an app with that yet, so I can't provide examples.
It's on my interest to know the behavior in these cases of the router, because whenever I change the route I would want to stop making the constant calls (as they won't be necessary).
The reason is that Depending on this I'd have to switch tooling for a project I have in mind.
In general, a component's instance will be destroyed when you navigate away from it. However, there are two exceptions to this ..
When you use routes with params. From the Vue Router docs
One thing to note when using routes with params is that when the user navigates from /user/foo to /user/bar, the same component instance will be reused. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. However, this also means that the lifecycle hooks of the component will not be called.
When you wrap your router-view component within a keep-alive element. Since the <router-view> is essentially a dynamic component.
Generally Vue does a very good job of housekeeping and cleaning up after a component's instance when it gets destroyed. But sometimes you'll have to do some manual cleanup, especially if you use some kind of external library. This is usually handled in the beforeDestroy hook of an instance's lifecycle.
In normal conditions, any logic/scripts/etc done at creation inside said component will be "purged" on the on destroy/close hooks (not only pertinent to vue but seen in lots of other tools), if there is a need to persist something then it should be in a higher scope (or other solution)
Any script written for the respective component only runs if the component is rendered in page. Once you go to about component replacing the previous component then previous script wont run.
you can make a parent component with a router-view and load in your page you always want to get loaded, so your FirstPage component, but this component should just have logic behind it, and no html because otherwise you will always see that rendered. Router-view the page you want to display the real html and stuff. I hope you get the idea, if not i could make an example for you. Goodluck.
I have a Semantic UI sidebar that uses the Semantic UI visibility module to highlight items in the sidebar menu as they're scrolled past in the page. I need to refresh this visibility config every time the page length changes. This happens a lot when my Vue page initially loads and then occasionally as the user adds bits to the page.
I'd like to just be able to add an updated callback on the root Vue element and have it trigger every time any descendant component updates but this doesn't seem to be a thing. Is there a way to do this tidily? I'd like not to have to litter a bunch of components with this updated callback.
you can use vue event bus to trigger events from different components.
First, initialize Vue.prototype.$bus = new Vue(); in your main.js file.
then use it to send events:
this.$bus.$emit('throw', 'Hi')
then let your main component listen:
this.$bus.$on('throw', ($event) => {
console.log($event) //shows 'Hi'
})
I construct deep nested tree of parent and children Vue custom components using my top level component dynamically and then I am updating the data from which all tree is constructed. Which has an effect of rendering the entire tree (its a form with various custom components). I refresh/rebuild the whole form after fetching the data (which is what vue do for reactive data) that itself tell me how to regenerate the view (its like a JSON Schema from which I render the entire view).
This is related to my other issue here.
I am observing a very weird behavior in my Vue Application. When I destroy all my children components and rebuild the data to force rendering the form, it appears that even after I have called $destroy on every child component...Vue is not entirely removing them from cache?
Does vue remove the component from cache if a $destroy is called ?
Because I do not see multiple components of the same type in the Vue component list in the Chrome Vue DevTool extension panel. But I see that the same custom event is handled twice by the same component. Same function that handle the events is getting called twice even though there is only one component visible in Vue DevTools of this type.
This only happens after I render the form. When the page is loaded for the first time every thing works. Then after I reset the form by destroying the child component and resetting the data to re-render the form, magically this child component start handling the event twice.. and in 3rd render it handle the events thrice. But I see only one component in google chrome VueJS DevTool extension panel. So my guess is that vue is still keeping the previously destroyed component in cache. I am trying to figure out how should I destroy those components in the cache.
If anyone has observed something similar and found a solution please let me know.
At the moment I am going to dig little bit more on my component keys (this particular component does not have explicit key set by me).
First and foremost, the vue documentation states:
vm.$destroy
In normal use cases you shouldn’t have to call this method yourself.
Prefer controlling the lifecycle of child components in a data-driven
fashion using v-if and v-for.
So instead of destroying and rebuilding the components manually yourself, you should really letting vue handle that via v-if and v-for. If the components aren't updating to your changes, you might be dealing with a reactivity issue.
As you mentioned that this is a deeply nested structure, the reactivity is key to keeping the components up to data with the data.
Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object using the Vue.set(object, key, value) method:
Vue.set(vm.someObject, 'b', 2)
Inside of a component:
this.$set(this.someObject, 'b', 2)
Also, keep in mind that Vue should be doing the heavy lifting in regards to component management, while you should define the parameters by which a component is rendered.
I'm using vue2, vue-router with keep-alive to develop a dashboard. What I want to achieve is following:
page should re-fetch when login -> logout -> login other account
(use beforeRouterEnter, beforeRouterLeave to re-fetch !? or use condition to keep alive component or not !?)
but vue-router can't use vue data to check page should keep alive or not...
in HTML template, it will render and render. If there has some vuex data show directly in HTML, it will error with not have the object inside object yet ex:
user: {
plan: {
xxx: ''
}
}
sure I can give vuex data all of property init data. It can avoid this thing happen, but if the page with keep alive, it still happens...
also, I can write many v-if in the template, but I think it's not a good idea to put v-if all around the template to make sure data exist..ex:
v-if="user.plan && user.plan.xxx"
or add v-if in component root template, is that a good idea !?
use beforeMount without keeping alive, there is no problem but it's not a good user experience dashboard (when you change page, data disappear or you have already load page data but load again)
Is there anyone who really use Vue 2 and it's relative library (vuex, vue-router) to develop can tell me how you develop your SPA project !?