how to put here hyperlink for this date? - vue.js

How to put here hyperlink for this date? I want this random date to lead me to some random internet-link
<v-list-item-content>
<v-list-item-title>
02.06.2023
</v-list-item-title>
</v-list-item-content>


Just wrap the date in an anchor tag.
<v-list-item-content>
<v-list-item-title>
02.06.2023
</v-list-item-title>
</v-list-item-content>

Related

v-list close group when list-item is clicked

I've this v-navigation drawer in my project. It contains both v-list-items and a v-list-group. When clicking an v-list-item, and the v-list-group is expanded, I want the group to be collapsed. How can this be done?
<v-app id="t">
<v-navigation-drawer dark v-model="sidebar" app>
<v-list>
<v-list-item router-link to='/Test'>
<v-list-item-title>Test</v-list-item-title>
</v-list-item>
<v-list-item router-link to='/Test2'>
<v-list-item-title>Test2</v-list-item-title>
</v-list-item>
<v-list-group :value="true">
<template v-slot:activator>
<v-list-item-title>Title</v-list-item-title>
</template>
<v-list-item
v-for="item in mobAdminItems"
:key="item.title"
:to="item.linkTo"
>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
<v-list-item router-link to='/Test3'>
<v-list-item-title>Test3</v-list-item-title>
</v-list-item>
<v-list-item router-link to='/Test4'>
<v-list-item-title>Test4</v-list-item-title>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>

You can just add v-model into v-list-group component and assign it to some variable. Changing this variable will lead to expand / collapse actions.
<v-list-group v-model="groupOpened">
<template v-slot:activator>
<v-list-item-title>Title</v-list-item-title>
</template>
<v-list-item
v-for="item in mobAdminItems"
...
#click="groupOpened = false"
>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
...
data () {
return {
...
groupOpened: false,
}
}
Test this at CodePen.

How to disabled hover in v-select in Vuetify

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>

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.

Vuetify #click not work when swipe/zoom-in/zoom out in mobile browser,I'm not sure what kind of gesture it is

vue:2.6.10
vuetify:2.1.13
describe:
Vuetify #click not work when swipe/zoom-in/zoom out in mobile browser,I'm not sure what kind of gesture it is.
if code isn't in codepen but in the clear dev mode,is it more easily reproduce.usually when i swipe down,swipe up,and it happens.
here is my codepen demo
People please give me some inspiration.
<div id="app">
<v-app>
<v-content>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-divider></v-divider>
<v-list subheader>
<v-list-item avatar ripple #click="rssHandler()">
<v-list-item-avatar>
<v-icon>mdi-heart</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>rss</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-icon>mdi-star</v-icon>
</v-list-item-action>
</v-list-item>
<v-list-item avatar ripple #click="rssHandler()">
<v-list-item-avatar>
<v-icon>mdi-heart</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>rss</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-icon>mdi-star</v-icon>
</v-list-item-action>
</v-list-item>
<v-list-item avatar ripple #click="rssHandler()">
<v-list-item-avatar>
<v-icon>mdi-heart</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>rss</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-icon>mdi-star</v-icon>
</v-list-item-action>
</v-list-item>
<v-list-item avatar ripple #click="rssHandler()">
<v-list-item-avatar>
<v-icon>mdi-heart</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>rss</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-icon>mdi-star</v-icon>
</v-list-item-action>
</v-list-item>
<v-list-item avatar ripple #click="rssHandler()">
<v-list-item-avatar>
<v-icon>mdi-heart</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>rss</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-icon>mdi-star</v-icon>
</v-list-item-action>
</v-list-item>
<v-list-item avatar ripple #click="rssHandler()">
<v-list-item-avatar>
<v-icon>mdi-heart</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>rss</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-icon>mdi-star</v-icon>
</v-list-item-action>
</v-list-item>
<v-list-item avatar ripple #click="rssHandler()">
<v-list-item-avatar>
<v-icon>mdi-heart</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>rss</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-icon>mdi-star</v-icon>
</v-list-item-action>
</v-list-item>
<v-list-item avatar ripple #click="rssHandler()">
<v-list-item-avatar>
<v-icon>mdi-heart</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>rss</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-icon>mdi-star</v-icon>
</v-list-item-action>
</v-list-item>
</v-list>
</v-card>
</v-flex>
</v-layout>
</v-content>
</v-app>

You have to use Touch events from Web Api.
Link on MDN Web doc's - https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
So, for example, if you want to trigger event on touch end it will be:
<v-list-item avatar ripple #touchend="rssHandler()">

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.