How to create menu items combining icon and text with vuetify 2.x?

I need to create a menu with some checked menu items. This is for toggle options.

The check icon should be shown and removed in front of the menu item when the item is clicked. Ideally, the menu should not close when the toggle menus are selected.

Making a dialog with switches would be inconvenient because it would require multiple clicks to perform the operation and the user wouldn't have a direct feedback on the effect. The toggle menu items modify the filtering rule of a displayed list.

My current code has the toggle menu items but there is no feedback for the user with check icons.

Not sure if checked menus are compatible with material design.

Edit: Adding an icon to a menu item is very simple.

          <v-list-item @click="maskZero">
            <v-list-item-title>
              
            </v-list-item-title>
            <v-list-item-icon v-bind:class="showWhenMaskZero">
              <v-icon> mdi-check </v-icon>
            </v-list-item-icon>
          </v-list-item>

  // . . .
  computed: {
    showWhenMaskZero() {
      return {
        "d-none": !this.$store.maskZero,
      };
    },
  },

What is not working is toggling its visibility. The showWhenMaskZero() function is only called the first time the menu is displayed.

How could I force an update of the menu content ?

from Recent Questions - Stack Overflow https://ift.tt/3j4uoYG
https://ift.tt/eA8V8J