Search code examples
vuejs3vuetifyjs3

How do I make my dialog persist after invoking it from a menu?

I am using Vue 3 and Vuetify 3. I have a button labeled Settings on my app-bar that causes a menu to appear when I click the button. The menu has one item on it, which invokes a dialog. When I click on the Change Locale menu item, the Change Locale item appears for a very brief moment then disappears. I find that I have to click on the Settings button a second time before the dialog persists. What am I doing wrong?

Here is the playground.

To see the problem:

  1. Click on Settings.
  2. Click on Change Locale. The dialog will appear and then disappear very quickly.
  3. Click on Settings again. This time, the dialog will persist.
Solution

  • Currently, the <ChangeLocale /> is placed inside the VMenu. When you click on the item in the menu, the dialog is shown and the menu closes, which removes the <ChangeLocale /> from the document along with it. When you open the menu again, the <ChangeLocale /> is still there, so the dialog shows up immediately.

    Move the <ChangeLocale /> out of the VMenu to have it behave as expected.

    Here is the updated playground.

    Btw, localeDialog is initialized as an array, but it is used as an object. This works, because arrays are objects, but it is most likely a mistake.