While @click doesn't seem to respond, v-bind:click does register. However, I'm facing the challenge of not being able to access the mdl-menu or mdl-menu-item components in order to add the method.
The goal is to implement something like
@click="setStatus('field-name', 'value')"value, but the same field-name).
I suspect there might be an overlooked aspect of VueJS that could help or perhaps it involves something more sophisticated with Events.
Despite trying to include inline code bus.$emit('event', 'data'), nothing happens - no errors, no output in console, simply nothing.
For reference, here's a sample element:
<span class="bar" v-on:click="clicked">
<mdl-button icons raised colored
v-bind:id="generateId('av')"
v-bind:class="getButtonClass(row.avStatus)"
v-bind:title="row.avStatus"
>
<i class="material-icons">videocam</i>
</mdl-button>
<mdl-menu v-bind:for="generateId('av')">
<mdl-menu-item data-field="avStatus">Open</mdl-menu-item>
<mdl-menu-item data-field="avStatus">In Progress</mdl-menu-item>
<mdl-menu-item data-field="avStatus">Review</mdl-menu-item>
<mdl-menu-item data-field="avStatus">Ready</mdl-menu-item>
</mdl-menu>
</span>
Edit 1:
Last night, I managed to make the click event function. Yet, the method used doesn't feel quite right (seems messy).
What I did was attach the v-on:click="clicked" listener to the parent span, and within the clicked() method, I included:
if (e.target.className == "mdl-menu__item") { /* code */ }
This approach feels...off. Shouldn't I be able to directly add a listener to the menu option itself, or at the very least to the parent mdl-menu?