I'm using the navigation drawer to show my data list in a dialog box.it works and shows fine when I first open it,but when I open the dialog again, the whole navigation drawer disappears. there's also no problem with my data GET.
<v-navigation-drawer floating height="140px" class="w-100">
<v-list dense rounded>
<v-divider></v-divider>
<v-list-item-group class="mt-3" color="primary" mandatory>
<v-list-item v-for="(desc, index) in dataList" :key="index" #click="getDesc(desc)">
<v-list-item-action-text class="pe-4">{{ desc.title }}</v-list-item-action-text>
<v-list-item-content>
</v-list-item-content>
<v-list-item-icon>
<v-icon small color="red" class="pe-2" #click="deleteDesc(desc.eid)">mdi-delete</v-icon>
</v-list-item-icon>
</v-list-item>
<v-list-item v-if="!dataList.length">
مرحله ای وجود ندارد
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
it's inside a form.
my data get func in the dialog component:
async getData() {
await this.$store.dispatch("axiosGet",
{url: 'folder/api/descriptions', params: {Title: this.title}}).then(response => {
if (response.status === 'error') return
this.dataList = response.data.data.data
})
},
You need to pass v-model to the v-navigation-drawer in order to show and hide it. Here is a minimum required example for you to go.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
drawer: false
}
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-navigation-drawer v-model="drawer" floating height="140px" class="w-100">
<v-list dense rounded>
<v-divider></v-divider>
<v-list-item-group class="mt-3" color="primary" mandatory>
<v-list-item>
<v-list-item-action-text class="pe-4">idk</v-list-item-action-text>
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
<v-btn absolute #click="drawer = !drawer">Toggle</v-btn>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
Related
I have a v-navigation-drawer and a dropdown menu inside it.
I'd like them both to have the same width whether the dropdown's up or down. At the moment, the dropdown is going outside the drawer when I open it. Does anyone know how to reduce a dropdown's width ?
<v-navigation-drawer
class="vnd"
height="98vh"
width="360px"
dark
right
v-model="drawerSettings"
absolute
temporary
>
<template>
<v-container fluid>
<v-select
v-model="valuesType"
:items="typeArray"
label="Relationship"
multiple
>
<template v-slot:prepend-item>
<v-list-item
ripple
#mousedown.prevent
#click="toggleType"
class="test"
>
<v-list-item-action>
<v-icon :color="valuesType.length > 0 ? 'indigo darken-4' : ''">
{{ iconType }}
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
Select All
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider class="mt-2"></v-divider>
</template>
</v-select>
</v-container>
</template>
</v-navigation-drawer>
First, remove the <v-container fluid> because it's taking padding, then use prop attach with v-select> , it specifies which DOM element that this component should detach to
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
drawerSettings: true,
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
selectedItem: [],
}),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
<div id="app">
<v-app id="inspire">
<v-card>
<v-navigation-drawer
class="vnd"
height="98vh"
width="360px"
dark
right
v-model="selectedItem"
absolute
temporary
>
<v-select
v-model="selectedFruits"
:items="items"
label="Favorite Fruits"
multiple
attach
>
</v-select>
</v-navigation-drawer>
</v-card>
</v-app>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
can Any one help me... I want to show card-title only in card-1. I don't want to show the card-title in card-2 card-3 and card-4.
<v-app>
<v-row v-for="(item, index) in list" :key="index">
<v-col cols="12">
<v-card>
<v-card-title>
<v-avatar size="60" color='primary'>{{item.avatarText}}</v-avatar>
</v-card-title>
<v-card-text>{{item.name}}</v-card-text>
</v-card>
</v-col>
</v-row>
</v-app>
</template>
<script>
export default{
data(){
return{
list:[{name:'apple1',avatarText:'Abc',},
{name:'apple2'},
{name:'apple3'},
{name:'apple4'}]
}
}
Using v-if, you can check for the index:
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: () => ({
list:[ {name:'apple1', avatarText:'Abc'}, {name:'apple2'}, {name:'apple3'}, {name:'apple4'} ]
})
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<v-app id="app">
<v-row v-for="(item, index) in list" :key="index">
<v-col cols="12">
<v-card>
<v-card-title v-if="index === 0">
<v-avatar size="60" color='primary'>{{item.avatarText}}</v-avatar>
</v-card-title>
<v-card-text>{{item.name}}</v-card-text>
</v-card>
</v-col>
</v-row>
</v-app>
expansion-panel and when I delete one from the array it automatically opens the next one for me.
how can I undo it?
Thanks
<v-expansion-panel
v-for="(Test, index) in Test"
:key="index">
<v-expansion-panel-header>
<template v-slot:actions>
<v-icon color="green">fa fa-check</v-icon>
</template>
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-col cols="4">
<v-btn
text
color="primary"
#click="
delete(Test)
"
>delete</v-btn
>
</v-col>
</v-expansion-panel-content>
</v-expansion-panel>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
active: null,
test: [1, 2, 3, 4, 5]
}),
methods: {
del(index) {
this.test.splice(index, 1)
this.active = null
}
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-expansion-panels v-model="active">
<v-expansion-panel v-for="(t, index) in test" :key="index">
<v-expansion-panel-header>
item
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-col cols="4">
<v-btn text color="red" #click="del(index)">delete{{t}}</v-btn>
</v-col>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-container>
</v-main>
</v-app>
</div>
Using value prop:
Controls the opened/closed state of content in the expansion-panel. Corresponds to a zero-based index of the currently opened content.
Set this.active = null after each deletion to keep the panel closed.
I continue to deal with Vuetify.
Tell me how you can apply a tooltip only for append-icon in a v-text-field?
Now tooltip does not work for icons at all!
codepen
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-text-field
label="Regular"
v-on="on"
append-icon="event"
style="max-width: 200px"
/>
</template>
<span>Tooltip</span>
</v-tooltip>
No way to solve this (By some API option) - The component renders the icon outside of the text-area (Open GitHub issue/feature if you want).
Anyway if you use a simple <v-icon> component it works fine.
Extra details here:
Wrapping v-icon with v-tooltip inside text-field?
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
url: 'https://stackoverflow.com/'
}
})
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-content>
<v-container>
<v-text-field label="Hello world">
<v-tooltip slot="append">
<template v-slot:activator="{ on }">
<v-icon v-on="on" color="primary" dark>
mdi-calendar
</v-icon>
</template>
<span>My Tooltip</span>
</v-tooltip>
</v-text-field>
</v-container>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
How to set the right size of vuetify card's content to enable scrolling? Unfortunatly, vuetify documentation shows only the simplest cases with not real-looking data. Here is list and footer inside card:
https://jsfiddle.net/Feofilakt/0Lnzteqm/
Vue.use(Vuetify);
var vm = new Vue({
el: "#app",
methods: {},
data: {}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.16/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.5.16/dist/vuetify.min.css" rel="stylesheet"/>
<div id="app">
<v-app>
<v-card height="400px">
<v-toolbar card>
<v-toolbar-title>Title</v-toolbar-title>
</v-toolbar>
<v-divider></v-divider>
<v-card-text>
<v-list>
<template v-for="i in 40">
<v-list-tile>
<v-list-tile-content>
<div>{{ i }}</div>
</v-list-tile-content>
</v-list-tile>
</template>
</v-list>
<v-footer>
<div>Footer</div>
</v-footer>
</v-card-text>
</v-card>
</v-app>
</div>
Found a solution. Need to apply flexbox styles to parts of v-card component:
Vue.use(Vuetify);
var vm = new Vue({
el: "#app",
methods: {},
data: {}
});
html {
overflow: hidden !important;
}
.v-card {
display: flex !important;
flex-direction: column;
}
.v-card__text {
flex-grow: 1;
overflow: auto;
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.16/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.5.16/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app>
<v-card height="200px">
<v-toolbar card>
<v-toolbar-title>Title</v-toolbar-title>
</v-toolbar>
<v-divider></v-divider>
<v-card-text>
<v-list>
<template v-for="i in 40">
<v-list-tile>
<v-list-tile-content>
<div>{{ i }}</div>
</v-list-tile-content>
</v-list-tile>
</template>
</v-list>
</v-card-text>
<v-footer class="pa-2">Footer</v-footer>
</v-card>
</v-app>
</div>
You can solve this with css
HTML
<v-card height="400px" class="scroll">
.....
</v-card>
CSS
.scroll {
overflow-y: scroll
}