, I am playing with a new vuetify project. I've implemented sign in and signup using a v-dialog and I'm calling those v-dialogs from multiple components. Basically it works for me but I want the previous dialog box to be closed when I click a button to pop up the next v-dialog.
Current Working:
1)A sign in button is placed in navbar. when that button is clicked Sign in v-dialog pops up.
On sign in page there's another button which will open a v-dialog where the user can choose type of account. And on choose of a button another v-dialog opens as sign in page.
Solution I need:
A method or logic with which i can close the previous dialog box while new dialog box pops up
Kindly looking forward for some ideas
Cheers
If those dialogs are in different components, eventBus maybe the best way to communicate between non-parent-child components:
in "main.js":
new Vue({
data: {
eventHub: new Vue()
},
...
}).$mount("#app")
in your dialog component, or the component that contain the dialog:
created() {
this.$root.eventHub.$on("close-dialog", () => {
do something to close your dialog, such as this.visible = false
})
}
before open your new dialog:
this.$root.eventHub.$emit("close-dialog")
Related
I have a simple autocomplete menu just like the one below.
Is there any way to monitor if the user clicks outside the menu? By default, if the user clicks outside the menu, it will close the menu. But I would like to trigger other actions besides just closing the menu.
I will keep it simple with the following scenario:
I have a boolean variable called myBoolVar that has a default value of false.
When the autocomplete is mounted, it will autofocus the input and the menu will only open when the user starts typing in the input. Untill here the myBoolVar remains false. but only when the user clicks outside of the menu, then the menu closes and the myBoolVar changes to true.
I have been through vuetify api documentation without any luck so far.
<v-autocomplete
v-model="valuesActor"
:items="actorArray"
:search-input.sync="searchActor"
filled
autofocus
background-color=#313131
append-icon=""
prepend-inner-icon="mdi-arrow-left"
color="var(--textLightGrey)"
>
</v-autocomplete>
You can use blur event for autocomplete like that:
methods: {
someMethod() {
alert('tadam')
}
}
<v-autocomplete
v-model="value"
:items="items"
#blur="someMethod"
/>
You can find the documentation here https://vuetifyjs.com/en/api/v-autocomplete/#events
You can use the v-click-outside directive calls a function when something outside of the target element is clicked on.
for more info see the vuetify: v-click-outside docs.
You can use something like this
<v-autocomplete
v-click-outside="onClickOutside"
....
and on click outside you can call method
methods: {
onClickOutside () {
....
},
},
I have a v-combobox component in my app. I have it to where I can type something in the input then #blur a check happens to see if the typed Item exists in the list or not. If it does not exist a modal opens up asking the user if they want to add it to the list.
I have it if the user clicks yes it is added to the list the problem I am having is if they click cancel and the dialog is closed focus should go back to the combobx input
When I try and set the focus I get the blue animation bar but no input cursor in the input of the combo box
I have set up a codesandbox example of my issue
CodeSandbox Example of Issue
I was wondering If i could get some help or pointers on why Im not getting the full focus to be able to type after clicking cancel on the dialog .
You can try to use $nextTick like this:
closeConfirmationDialog() {
// const comboBox = this.$refs[this.forInput];
// comboBox.$el.querySelector("input").focus();
this.showDialog = false;
this.cancelDialog = true;
this.$nextTick(() => {
this.$refs.categories.focus();
});
}
Is there a way to close the mobile hamburger menu when you click on a menu link? We have a menu link that launches a modal window, but the menu is still showing behind it when I close the modal.
The state of the hamburger menu is kept in HamburgerMenuService. You can inject this service in your modal for example you can call the toggle(false) method in this component's onInit hook.
This way when the modal initializes the menu will close.
Thanks for the pointers. This is how I achieved the task:
Inject the HamburgerMenuService into the component:
import { HamburgerMenuService } from ‘#spartacus/storefront’;
Add my constructor:
constructor(private hamburger: HamburgerMenuService) {}
Access the toggle method in my modal function:
this.hamburger.toggle(true); // force close
I'm utilizing <v-dialog> component to display a form for my web app. I want to implement an unsaved changes dialog to popup when the user aborts their changes without saving and either close/keep the dialog open depending on a button press. Unfortunately, I'm having a bunch of trouble figuring out exactly how to prevent the default closing actions done by the framework.
So from what I can tell, you can close a dialog 3 different ways:
Setting the v-model property to false.
Clicking outside of the v-dialog modal unless the persistent prop is set to true.
Pressing the escape key.
Let's not worry about the 2nd way to close the dialog I referenced above and assume it is set to true.
Approach #1:
My first approach was to only allow the user to exit the dialog if they hit a cancel button on the form. I quickly hit a snag when I tried to disable the use of the escape button.
Here's what I have tried so far: In my App.vue mounted function:
mounted () {
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
console.log('The escape key was pressed.')
e.preventDefault()
e.returnValue = false
e.stopImmediatePropagation()
}
})
}
This should work. The log message is displayed in the console, but the dialog still closes after the escape key is pressed. I know I should be using key codes here, but this is for readabilities sake. I've also tried keyup and keypress with no success. There has to be something wonky happening in either the Vue.js or Vuetify framework that's messing this up.
Approach #2:
After I failed miserably trying to disable the escape key, I had to try something different. I tried adding this code inside the watch function to try and keep the dialog open if they cancelled:
dialog (val) {
if (val) {
console.log('Dialog is true')
} else if (!val && !confirm('Unsaved changes, do you still want to exit?')) {
console.log('User Wants to Keep Dialog Open')
this.dialog = true
} else {
console.log('Dialog is False')
this.close()
}
}
When I try and close the dialog, the confirm message pops up, and I hit the cancel button. Then, for some reason, the confirm dialog opens again. So, I hit cancel again, then the dialog dismisses like nothing ever happened. Here's what the console reads:
User Wants to Keep Dialog Open
Dialog is true
User Wants to Keep Dialog Open
Dialog is true
I understand why the dialog watch method is being called again, what I don't understand is why the confirm dialog is showing again. That code should never be executing after cancelling the confirm message the first time. The log message shows that there's no way that code should be executing again. Something must be happening behind the scenes that I don't realize.
Anyone have experience with preventing the v-dialog component from closing? Or any help with my two approaches? Thanks in advance.
It's a property on the dialog:
<v-dialog persistent
That will force them to keep it open unless you call the closure programatically by toggling the model.
I have a Bootstrap navbar.
clicking on the hamburger icon will open a menu.
One of the menu item is a button for another collapsable div.
i added this to this button:
$('.nav a').on('click', function(){
$(".navbar-toggle").click()
});
This will close the navbar menu and will show another div.
What i want is clicking on the hamburger icon again will CLOSE the new div and will NOT open the menu.
Basically what is need is the navbar-toggle to close all collapsable div and will open the menu only if there isn't any other div open.
This is my example: http://www.bootply.com/FqZYHFSWrh
Scroll down to get 770px page width
click on login, you will see that the menu disappear.
The next click on the hamburger icon i want to close the login container.
The second click (after the login container is close) i want to open the menu again.
You could add an event handler such as:
$('button.navbar-toggle').on('click', function(event){
if ($('.login-collapse').hasClass('in')) {
event.stopPropagation();
$('.login-collapse').collapse('hide');
}
});