mdl-menu-item and v-if not working well together

[dsl101]

I'm not sure if this is an underlying MDL issue, but I'm trying to build a menu which has a conditional item in it:

<mdl-button id="account" :disabled="!loggedIn" icon="account_circle"></mdl-button>
<mdl-menu class="mdl-menu--bottom-right" for="account">
  <mdl-menu-item v-if="canAddProject" @click.native="newProject">New Project</mdl-menu-item>
  <mdl-menu-item @click.native="changePassword">Change Password</mdl-menu-item>
  <mdl-menu-item @click.native="logout">Logout</mdl-menu-item>
</mdl-menu>

canAddProject() is a computed property which returns true or false. If I remove the v-if, all works fine (except everyone sees the 'New Project' menu item). With the v-if, the menu fires the newProject() function, but it doesn't close. At the moment, all the event handlers just console.log() their activation, so I don't think it's anything in there causing a problem. Have you seen this before? Is there a workaround?

[posva]

Yes, this is because the approach of upgrading the dom element with the MDL methods isn't the best approach, it's better to handle the items with Vue and mostly use MDL for styling. This is ofc related to mdl internal implementation. Hopefully this won't be the same in v2

[dsl101]

So... I'm still a little confused about what I should do in this scenario - apart from wait for MDL v2? I guess I could try putting a v-if around whole menu?

[posva]

@dsl101 Actually you can try to implement it yourself for your project in a different way from vue-mdl: without using the upgradeComponent method and handling all the events yourself. If you're happy with the results, you can, if you want, share it by creating a PR 😄 .

[dsl101]

Well, I was hoping to do something clever with putting 2 completely different menus / buttons in a div with v-if, but that still had the problem that sometimes the menu would stick open. So I thought I'd just bind the disabled option to the computed property, make it a method instead, etc. Nothing helped. Then I noticed this:

<mdl-menu-item disabled="true" @click.native="newProject">New Project</mdl-menu-item>

The item appears disabled, but clicking it still fires the event. No binding, conditional v-ifs or anything. Is that a bug?

[posva]

There're no props menu item actually. Honestly, building your own menu is the way to go 😆
That component cannot be easily integrated with vue like other components do

[posva]

Closing this is favor of #46