How to close the menu after click on using body slot?

[jacdy]

Hello:

The menu always showing after clicked each menu item.

<menu-item v-for="l in layout.language.list" :key="l.Id" @click.native="onChangeLanguage(l.AccessKey)" :sync="true">
<div slot="body">
<img :src="'/static/images/flags/' + layout.language.flags[l.AccessKey]" :class="'lng-image'" />{{l.Name}}
</div>
</menu-item>

[DAMisener]

I am experiencing a similar problem (details my issue report).

Did you ever resolve your problem? If so... any suggestions?

If not... did you use alternative component?.

[michitaro]

@jacdy

Sorry for the late response. Bit tricky but to use the code below can close menu.

  <menu-bar-item Label="lang" ref="menuBarItem">
    <menu-item
      v-for="l in layout.language.list"
      :key="l.Id"
      @click.native="onChangeLanguage(l.AccessKey) ; $refs.menuBarItem.$refs.menu.close(true)"
    >
      <div slot="body">
        <img
          :src="'/static/images/flags/' + layout.language.flags[l.AccessKey]"
          :class="'lng-image'"
        />
      </div>
    </menu-item>
  </menu-bar-item>

or

  <menu-button-menu ref="buttonMenu">
    <button>Click Here</button>
    <template slot="contextmenu">
      <menu-item
        v-for="l in layout.language.list"
        :key="l.Id"
        @click.native="onChangeLanguage(l.AccessKey) ; $refs.menuBarItem.$refs.menu.close(true)"
      >
        <div slot="body">
          <img
            :src="'/static/images/flags/' + layout.language.flags[l.AccessKey]"
            :class="'lng-image'"
          />
        </div>
      </menu-item>
    </template>
  </menu-button-menu>

[jacdy]

@michitaro Thanks a lot.