How to disabled hover in v-select in Vuetify - vue.js

In this situation, I need help with vuetify`s styles
Can someone clarify how I can change the style of lists inside in select?
for now, highlighted whole block with an available list
Basically, I m need to highlight only one option from this list
If someone knows how to change this styles I'm were very grateful
This is my code
<v-select
ref="hoverSelect"
v-model="productData.filters"
:items="filterGroup"
:rules="fieldRules"
item-text="name"
item-value="id"
chips
label="Filters"
multiple
solo
class="hoverSelect"
>
<template v-slot:item="{item, index}">
<v-list tile subheader style="width: 100%" >
<v-list-item >
<v-list-item-content>
<v-subheader>{{item.name}}</v-subheader>
</v-list-item-content>
<v-list-item-action-text>Кол-во фильтров: {{item.filters_count}} шт</v-list-item-action-text>
</v-list-item>
<v-divider class="ma-0"></v-divider>
<v-list-item-group multiple v-for="filter in item.filters" :key="filter.id" >
<v-list-item>
<template v-slot:default="{ active }">
<v-list-item-action>
<v-checkbox :input-value="active"></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>{{ filter.name }}</v-list-item-title>
</v-list-item-content>
</template>
</v-list-item>
</v-list-item-group>
<v-divider class="ma-0"></v-divider>
</v-list>
</template>
</v-select>

Related

Why doesn't the v-menu work with v-btn when the v-btn has v-for

I've been trying to implement a v-menu on a v-btn that as v-for. It works fine without v-for. I'm retrieving the category name using axios. So dont mind that. I just want the v-menu to work like that.
<div class="text-center">
<v-menu
:close-on-content-click="false"
:nudge-width="200"
offset-x
>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="indigo"
dark
v-bind="attrs"
v-on="on"
:value="categoryid"
v-for="(categoryItem, i) in categoryList" :key="i"
#click="subcat(categoryItem._id)"
>
{{ categoryItem.cname }}
</v-btn>
</template>
<v-card>
<v-list>
<v-list-item>
<v-list-item-avatar>
<img
src="https://cdn.vuetifyjs.com/images/john.jpg"
alt="John"
/>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>John Leider</v-list-item-title>
<v-list-item-subtitle
>Founder of Vuetify</v-list-item-subtitle
>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
<v-divider></v-divider>
</v-card>
</v-menu>
</div>

Collapse all list and expand only the selected list in vuetify

I have a v-list-group with 2 sub-group inside it like in the image shown below. Whenever I click the parent list-group other groups are getting collapsed, but when I click a sub-group inside a list-group, other sub-group inside the list-group are not getting collapsed. Ex: when I click Admin, the Actions sub-group is not getting collapsed.
codepen: https://codepen.io/eajithkumar128/pen/BaoEeqW?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Flists%2F
<div id="app">
<v-app id="inspire">
<v-card
class="mx-auto"
width="300"
>
<v-list>
<v-list-group
prepend-icon="account_circle"
value="false"
>
<template v-slot:activator>
<v-list-item-title>Users</v-list-item-title>
</template>
<v-list-group
no-action
sub-group
value="true"
>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title>Admin</v-list-item-title>
</v-list-item-content>
</template>
<v-list-item
v-for="(admin, i) in admins"
:key="i"
link
>
<v-list-item-title v-text="admin[0]"></v-list-item-title>
<v-list-item-icon>
<v-icon v-text="admin[1]"></v-icon>
</v-list-item-icon>
</v-list-item>
</v-list-group>
<v-list-group
sub-group
no-action
>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title>Actions</v-list-item-title>
</v-list-item-content>
</template>
<v-list-item
v-for="(crud, i) in cruds"
:key="i"
#click=""
>
<v-list-item-title v-text="crud[0]"></v-list-item-title>
<v-list-item-action>
<v-icon v-text="crud[1]"></v-icon>
</v-list-item-action>
</v-list-item>
</v-list-group>
</v-list-group>
<v-list-group
prepend-icon="account_circle"
value="false"
>
<template v-slot:activator>
<v-list-item-title>Users</v-list-item-title>
</template>
</v-list-group>
</v-list>
</v-card>
</v-app>
</div>
this can be simply done by using a v-model with every v-list-group. Something like this:
<v-list-group v-model="SubActive[header+subheader]" no-action sub-group v-for="(subheader, sIndex) in header.SubHeaderList" :key="sIndex" >
<template v-slot:activator>
<v-list-item-content v-on:click="subToggle(header,subheader)">
<v-list-item-title>
<span>{{subheader.Title}}</span>
</v-list-item-title>
</v-list-item-content>
</template>
SubActive is a Vue data object with keys as header+subheader (to uniquely identify each subheader) and its initial value will be set to false for all subheaders.
The subToggle function will simply switch the rest of the values to false(to collapse them all except the one which is clicked):
subToggle(brand, category) {
for (let i = 0; i < Object.keys(this.SubActive).length; i++) {
if (brand + category != Object.keys(this.SubActive)[i]) {
this.SubActive[Object.keys(this.SubActive)[i]] = false;
}
}
},

How to pass properties from grandchild menu object to grandparent?

my employer decided to expand the menu bar with another sub-pages, and things that works completely fine previously (simple one sub-menu) now don't want to work, because it has sub-menu, under another sub-menu.
Here is the pics:
As you can see when I hover "Acts" the sub menu with External and Internal documents works perfectly fine
but when I would like to move cursor on another sub-menu with "Director's Orders", whole menu is hiding. I think it's because second sub-menu (grandchild) don't pass info to main menu element (grandparent) to keep menu active, but I have no idea how to fix it.
Here is the code:
<v-menu open-on-hover bottom offset-x transition="slide-x-transition">
<template v-slot:activator="{ on }">
<v-list-item link v-on="on">
<v-list-item-content>
<v-list-item-title class="subtitle-1">Acts <v-icon class="menu-icon">keyboard_arrow_right</v-icon></v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
<v-list color="#F0FAFE">
<router-link to="/External"><v-list-item link>
<v-list-item-content>
<v-list-item-title class="subtitle-1 font-weight-medium">External</v-list-item-title>
</v-list-item-content>
</v-list-item></router-link>
<v-menu open-on-hover bottom offset-x transition="slide-x-transition">
<template v-slot:activator="{ on }">
<v-list-item link v-on="on">
<v-list-item-content>
<v-list-item-title class="subtitle-1 font-weight-medium">Internal <v-icon class="menu-icon">keyboard_arrow_right</v-icon></v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
<v-list color="#F0FAFE">
<v-menu open-on-hover bottom offset-x transition="slide-x-transition">
<template v-slot:activator="{ on }">
<v-list-item link v-on="on">
<v-list-item-content>
<v-list-item-title class="subtitle-1 font-weight-medium">Director's Orders <v-icon class="menu-icon">keyboard_arrow_right</v-icon></v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
<v-list
color="#F0FAFE"
v-for="(item, index) in Orders"
:key="index"
>
<router-link :to="'/' + item.title"><v-list-item link>
<v-list-item-content>
<v-list-item-title class="subtitle-1 font-weight-medium">{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item></router-link>
</v-list>
</v-menu>
<router-link to="/Other"><v-list-item link>
<v-list-item-content>
<v-list-item-title class="subtitle-1 font-weight-medium">Other</v-list-item-title>
</v-list-item-content>
</v-list-item></router-link>
</v-list>
</v-menu>
</v-list>
</v-menu>
And little disclaimer. Yes I know this type of menu isn't a Material Design menu, which is the base for vuetify
I don't think v-menu supports nested menus (at least not when opening them with mouseover).
You'd have to make one yourself with nested v-hover. You can create a recursive component building the menu from a nested array of items.
Something like this:
<template>
<v-list color="#F0FAFE" class="menu">
<v-hover v-for="item in items" :key="item.title" v-slot="{ hover }">
<router-link v-if="item.route" :to="item.route" class="item">
<v-list-item link>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</router-link>
<v-list-item v-else class="item">
<v-list-item-content>
<v-list-item-title>{{ item.title }} -></v-list-item-title>
</v-list-item-content>
<NestedMenu v-if="item.children && hover" :items="item.children"/>
</v-list-item>
</v-hover>
</v-list>
</template>
<script>
export default {
name: "NestedMenu",
props: {
items: { type: Array, default: () => [] }
}
};
</script>
Here is a working example (which need some styling tho): https://codesandbox.io/s/nestedmenu-u8tk1?file=/src/components/NestedMenu.vue
Add more items and levels on menuItems in App.vue.

How to add content to Vuetify (v-navigation-drawer)

I found this codepen: https://codepen.io/carl_/pen/QWwgqBa, which closely does as I want.
But there is no content/text on the right side.
And I cant figure out how to add content on the right side.
I have tried to google the problem and found solutions like "add v-content", "it needs to be inside v-app". But none of these actually got the content on the right side. It ended below the card or inside the navigation-drawer.
How can I manage to get content on the right side of the menu?
<div id="app">
<v-app id="inspire">
<v-card style="width:800px;margin:40px auto">
<v-navigation-drawer
expand-on-hover
permanent
>
<template v-slot:prepend>
<v-list>
<v-list-item>
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/women/85.jpg"></v-img>
</v-list-item-avatar>
</v-list-item>
<v-list-item
link
two-line
>
<v-list-item-content>
<v-list-item-title class="title">Sandra Adams</v-list-item-title>
<v-list-item-subtitle>sandra_a88#gmail.com</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-icon>mdi-menu-down</v-icon>
</v-list-item-action>
</v-list-item>
</v-list>
</template>
<v-divider></v-divider>
<v-list
nav
dense
>
<v-list-item link>
<v-list-item-icon>
<v-icon>mdi-folder</v-icon>
</v-list-item-icon>
<v-list-item-title>My Files</v-list-item-title>
</v-list-item>
<v-list-item link>
<v-list-item-icon>
<v-icon>mdi-account-multiple</v-icon>
</v-list-item-icon>
<v-list-item-title>Shared with me</v-list-item-title>
</v-list-item>
<v-list-item link>
<v-list-item-icon>
<v-icon>mdi-star</v-icon>
</v-list-item-icon>
<v-list-item-title>Starred</v-list-item-title>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-card>
</v-app>
</div>
<v-layout> was the attribute I needed to add.

Vuetify renders tags instead of class name

I'm using v card from vuetify but realized that when i did mine using the same markup, my "v-list-item" is render differently compare with the sample in code pen. Some of the CSS styles are not following too. Has anyone experienced this?
<v-card
class="mx-auto"
max-width="344"
outlined
>
<v-list-item three-line>
<v-list-item-content>
<div class="overline mb-4">OVERLINE</div>
<v-list-item-title class="headline mb-1">Headline 5</v-list-item-title>
<v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-avatar
tile
size="80"
color="grey"
></v-list-item-avatar>
</v-list-item>
<v-card-actions>
<v-btn text>Button</v-btn>
<v-btn text>Button</v-btn>
</v-card-actions>
</v-card>
https://codepen.io/pen/?&editable=true&editors=101
try wrapping your list item in a parent v-list component.
<v-card
class="mx-auto"
max-width="344"
>
<v-list> <!-- NOTE THE PARENT COMPONENT!!! -->
<v-list-item three-line>
<v-list-item-content>
<div class="overline mb-4">OVERLINE</div>
<v-list-item-title class="headline mb-1">Headline 5</v-list-item-title>
<v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-avatar
tile
size="80"
color="grey"
></v-list-item-avatar>
</v-list-item>
</v-list>
<v-card-actions>
<v-btn text>Button</v-btn>
<v-btn text>Button</v-btn>
</v-card-actions>
</v-card>
But all it does is add margin to the block.
Please update your pen. It's empty.