How do I show a custom pop up to alert about unsaved changes in a vue component before leaving the component? For example: If there is some page in which we have a cart (vue component) in which items are added but not saved, how do I show a custom modal to warn the user before leaving to a different component without a route change?
Related
I have a component in Angular and when I press a button I want Ural to change
But I do not want my component to change
What do you think I should do?
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.
I am attempting to access a child component's $refs inside a b-modal.
On page load, I can see with vue dev tools that "agent-edit" has not been created. If I put the component outside of b-modal, it does show and I can access it -- however I need this to load inside a modal. How can I access $refs.editAgent? Can I force this child component to load with the page?
<b-modal id="editModal" ref="editModal" title="Edit Agent" size="lg">
<agent-edit ref="editAgent"></agent-edit>
<div slot="modal-footer" class="w-100"></div>
</b-modal>
Refs are relative to the component they are created in (not the child components)
// use this
this.$refs.editAgent
// Not this
this.$refs.editModal.$refs.editAgent
Note that b-modal is lazy by default, meaning the content is not rendered (instantiated) in the document until the modal is shown.
Once the modal is finished opening, you should have access to the refs (they don't exist until they are rendered into the DOM)
Listen for the modal's shown event, and then access the refs once that event is emitted.
I guess, that there is no <agent-edit> inside <b-modal>, when you try to call the method.
When the modal is hidden, there is no need to render the child components. Try to first show the modal and then access its children (maybe even with a Vue.$nextTick to make sure everything is finished).
In your case, this.$refs.editModal.$refs.editAgent should work.
But pay attemption to the use of $refs and think about emitting events.
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'
})
In bootstrap hash links are used to toggle collapsible panels:
<Link to='#' data-toggle='collapse' data-target={dataTarget} aria-expanded='false'>{this.props.text}</Link>
When clicking a link like this I would like react router to not re-render the components.
The above link is used in an nav-menu that overflows some page content. When the link is clicked in the menu it causes the page content to refresh. This happens because react router picks up the click on the link and as a result the route for the current page is triggered.
How can I avoid this so the link just toggles the collapsible panel without causing a re-render?
remove # from to='#'` and it won't refresh.