I'm trying to set up a Navbar in Element-UI with a nested submenu. In additions to opening the submenu, I want the router to go to the index attribute of the submenu. This doesn't happen; clicking on a submenu doesn't activate the router - it only works for el-menu-item and not el-submenu, as far as I can tell.
Here's my code:
<el-submenu index="2">
<template slot="title"><feather type="edit"></feather></template>
<el-submenu :index="subject.label" v-for="subject in subjects">
<template #click="setSubject(subject.label)" slot="title">{{ subject.label }}</template>
<el-submenu :index="spec.label" v-for="spec in subject.children">
<template slot="title">{{ spec.label }}</template>
<el-menu-item :index="prac.label" v-for="prac in spec.children">{{ prac.label }}</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu-item>
I tried adding a click event to <el-submenu :index="subject.label" v-for="subject in subjects">'s template called setSubject. It fails to execute when clicked. Can anyone help me figure this out?
Related
I have an expandable v-list-group with a v-checkbox where when i click on the v-checkbox the list toggles. I want to disable this reaction. it is possible? my code element:
<v-list>
<v-list-group>
<template v-slot:activator>
<v-list-item-action>
<v-checkbox #click="fn()"/>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title/>
</v-list-item-content>
</template>
...
</v-list-group>
</v-list>
Thanks.
Try using click.stop on the v-checkbox in order to stop click event propagation.
Reference: https://v3.vuejs.org/api/directives.html#v-on
Similar question: Vutify list group make parent clickable
My target is to build a conditional rendering between <v-skeleton-loader> and <v-card>Skeleton binding them to a property called isActive
I want that Card component only renders when the <v-image> has been loaded.
"Officially" based on Vuetify's guideline, the <v-image> component has its own "load" event based on this sample codepen, this could be easilly handled by calling the loadCard(item) and setting isActive=true after image has been loaded <v-img :src="item.img" #load="loadCard(item)" > but it doesn't trigger on #load event.
<div v-for="item in items" :key="item.id" >
<v-card v-if="item.isActive">
<v-img :src="item.img" #load="loadCard(item)" >
......
</v-card>
<v-skeleton-loader v-else
:loading="item.isActive"
style="width:13.020vw; margin-bottom:2.395833vw;"
transition="scale-transition"
type="card">
</v-skeleton-loader>
I've tried to put call the function into the skeleton loaded by #click="loadCard(item)" and it works perfectly. After the click the Card renders.
<v-skeleton-loader v-else
#click="loadCard(item)"
:loading="item.isActive"
style="width:13.020vw; margin-bottom:2.395833vw;"
transition="scale-transition"
type="card">
</v-skeleton-loader>
I have a simple checkbox with injected template for the label slot, as shown below:
<v-checkbox
v-model="selectAllRequired"
class="not-so-isolated">
<template v-slot:label>
<button
#click="changeOrder">
<v-img
max-width="14"
class="image list-sort-icon"
:src="directionIcon" />
<span class="list-title">ROLA</span>
</button>
</template>
</v-checkbox>
I have specified some behavior when someone clicks on the mentioned label. The problem is that box is used for some other job. How to tick the checkbox only if the box was clicked, and ignore label-clicking? Is it possible? Thanks for any help.
You can also use Event.stopPropagation() on top of your changeOrder(event) method.
Example:
https://jsfiddle.net/4ya9gqps/
I have a Vue/Vuetify app that has a left nav menu, and it was originally created before my time with just a single level of items. I've had to add a second level of menu items, and they work fine to the extent that they expand when the parent item is clicked, and when clicked they do what they should. The thing I can't quite figure out is how to 1) highlight the selected submenu item and 2) remove the highlighting from the parent item when clicked.
Here is the markup for the element:
<template>
<v-list dark class="ap-sidebar-applist">
<v-list-group
class="ap-sidebar-group"
v-for="(item, i) in items"
:key="i"
:prepend-icon="item.icon"
:value="item.visible"
#click="onClick(item)"
>
<v-list-tile slot="activator">
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
<div v-if="item.children">
<v-list-tile class="sub-list"
v-for="(subMenu, j) in item.children"
:key="j"
#click="onClick(subMenu, true)"
active-class="default-class sub-list"
>
<v-list-tile-action>
<v-icon>{{ subMenu.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-title>{{ subMenu.title }}</v-list-tile-title>
</v-list-tile>
</div>
</v-list-group>
<!--</v-list-group> -->
</v-list>
</template>
And here is a full CodePen. One note for the CodePen is that the setCurrentWorkspace called from onClick() is a Vuex action that is used higher up the component tree to highlight menu tabs elsewhere in the app.
What I'm seeing is that the sub-class class (defined in active-class for the child items) is applied to both of the submenu items when the parent Templates item is selected, and the v-list__group__header--active class remains on the parent item as well.
Do I need to manually remove the active class from the parent Templates item, and also remove it manually from the other submenu item? Or is there an easier way to do this with the current Vuetify API?
I try to migrate from Polymer 0.5 to 1.0 and got the following question:
Does anybody know, how to ignore nodes inside a paper-menu? In 0.5 you could set the attribute excludedLocalNames to ignore some of them, but in 1.0 it seems to have changed.
In the IronSelectableBehavior, there is still the property excludedLocalNames, so i thought it must be still working. Has anybody a working example?
The following code was my first attemp to create a submenu with that feature, but the submenu is not ignored by the parent:
<paper-menu selected="{{route}}" attr-For-Selected="entry" excludedLocalNames="paper-menu">
<paper-icon-item entry="home">
<iron-icon icon="home" item-icon></iron-icon>
Übersicht
</paper-icon-item>
<paper-icon-item entry="page1">
<iron-icon icon="label" item-icon></iron-icon>
Page1
</paper-icon-item>
<template is="dom-if" if="{{computeEquals(route,'page1')}}">
<paper-menu class="submenu" selected="{{routePage1}}" attr-For-Selected="entry1">
<paper-icon-item entry1="basics">
<iron-icon icon="icons:assignment" item-icon></iron-icon>
Basics
</paper-icon-item>
<paper-icon-item entry1="tools">
<iron-icon icon="icons:apps" item-icon></iron-icon>
Tools
</paper-icon-item>
</paper-menu>
</template>
<paper-icon-item entry="page2">
<iron-icon icon="label" item-icon></iron-icon>
Page2
</paper-icon-item>
</paper-menu>
Because there is no more submenu-element in 1.0, I tried that way to put a menu inside of a menu. But if I click on a submenu-item, the parent-menu changes his focused item...
Has anybody an idea how to use the excludeLocalNames-attribute?
Edit
Here are links to the documentations:
IronSelectableBehavior
paper-menu
Don't use excludedLocalNames in 1.0. Instead, set the selectable property on the selector to the names of the nodes you would like to allow selection for. Basically, it's a whitelist instead of a blacklist (which is a lot more reliable, too).
For example:
<paper-menu selectable="paper-item,div">
<paper-item>You can select me!</paper-item>
<div class="menu-item">You can select me, too.</div>
<paper-icon-item icon="user">You can't select me.</paper-icon-item>
<header>I'm not selectable either.</header>
</paper-menu>