How to check if a <v-data-table> row is expanded from a slot ?
<v-data-table ...>
<template v-slot:item.client="{ item, expand, isExpanded }">
<b>
{{ item.client }}
{{ isExpanded ? 'yes' : 'no' }}
</b>
</template>
</v-data-table>
Related
I have a v-data-table that's supposed to display 42 elements.
I made it so it can display 10 elements minimum or 42 depending on the user's wishes.
<v-card-text>
<v-data-table
dark
:footer-props="{ 'items-per-page-options': [10, 25, -1] }"
dense
calculate-widths
fixed-header
height="498"
:headers="headers"
:items="res"
sort-by="publicationDate"
:sortDesc="sortVal"
class="elevation-1"
>
<template #item.video="{ item }">
<a
target="_blank"
v-if="item.video != ''"
class="links1 video-icon"
:href="item.video"
>
<v-btn dark icon>
<v-icon class="ic1">mdi-movie</v-icon>
</v-btn>
</a>
</template>
<template #item.title2="{ item }">
<!-- NEWS column -->
<a
target="_blank"
v-if="item.file != ''"
class="links1"
:href="item.file"
>
<span style="color:white"> {{ item.title }} </span>
</a>
</template>
</v-data-table>
</v-card-text>
</v-card>
When 10 items are displayed, I'd like my table to not be scrollable, that all 10 items are displayed and I'd like it to be scrollable when mre than 10 items are displayed.
Does anyone know how to do that ?
When I try to add courseDatas.title in v-for I get error: courseDatas is null
App.vue
<template>
<div v-for="(courseDatas, index) in courseDatas" :key="index">
{{ index }} - {{ courseDatas }}
</div>
<script>
export default {
data() {
return {
courseDatas: JSON.parse(
document.getElementById("app").getAttribute("course")
),
};
},
};
Result
When I add this:
<template>
<div v-for="(courseDatas, index) in courseDatas" :key="index">
{{ index }} - {{ courseDatas }} {{ courseDatas.title }}
</div>
EDIT
index.blade.php
#extends('layouts.app')
#section('content')
#foreach ($course as $courses)
<div id="app" course="{{$courses}}">
</div>
#endforeach
<script src="{{asset('js/course/app.js')}}"></script>
#endsection
check if the property is not null then render it using v-for and name the current item course
<template>
<template v-if="courseDatas">
<div v-for="(course, index) in courseDatas" :key="index">
{{ index }} - {{ course}}
</div>
<template>
<template>
and avoid to manipulate DOM as you did, define a prop called course as follows :
<script>
export default {
props:["course"],
data() {
return {
courseDatas: this.course
};
},
};
I use v-data-table with grouped rows: https://codepen.io/jangaraj/pen/zYqOwBj?editors=1010
I would like to show also item count for each category, e.g. category: Candy (3 items in the group).
Is there any slot for this kind of customization?
You can customize the group.header slot...
<template v-slot:group.header="{ group, items, isOpen, toggle, remove }">
<td colspan="2">
<v-btn icon #click="toggle">
<v-icon v-if="isOpen">
mdi-minus
</v-icon>
<v-icon v-else>
mdi-plus
</v-icon>
</v-btn>
Category: {{ group }} {{ items.length }}
<v-btn icon #click="remove">
<v-icon>
mdi-close
</v-btn>
</td>
</template>
Codeply
How to set v-data-table columns to fit its content width ?
<v-data-table
style="background: transparent"
dense
:headers="headers"
:items="items"
disable-pagination
hide-default-footer
no-data-text="No data available"
>
<!-- Titles -->
<template
v-slot:item.title="{ item }"
>
<div class="text-primary">
{{ item.title }}
</div>
</template>
</v-data-table>
From what I've seen it should close without adding anything special but every time I click on another expandable item the previous one doesn't close.
<template>
<div d-flex p-0 m-0>
<div mb-3>
<div v-for="item in items" :key="item.Id">
<div v-if="item.HasChildren === true">
<div
class="scanList pa-2 font-weight-light"
v-ripple="{ class: 'success--text' }"
#click="swapComponent(item)"
>
{{ item.Name }}
</div>
</div>
<div v-else-if="item.HasChildren === false">
<v-expansion-panel>
<v-expansion-panel-content>
<template v-slot:header>
<div>{{ item.Name }}</div>
</template>
<v-card>
<QR justify-center :value="item.Id"></QR>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</div>
</div>
<div v-if="model != null && model.HasChildren === false">
<v-card>
<template v-slot:header>
<div>{{ item.FullPathName }}</div>
</template>
<QR justify-center :value="model.Id"></QR>
</v-card>
</div>
</div>
<div v-if="items !== initialItems">
<div class="backButton" #click="swapPrevious()">
<v-icon class="arrow">fa-arrow-left</v-icon>
</div>
</div>
</div>
</template>
I'm on Vuetify 1.5. Thanks for the help.
You are trying to create a separate expansion panel in the loop and its independent, explicitly we can define a logic to close the other panels
Working codepen here (using vuetify 1.5x)
Changes for HTML:
Added a event trigger on wrapper around expansion panel.
Added v-model for each expansion panel.
<div v-else-if="item.HasChildren === false" #click="closeOtherPanel(item.Id)">
<v-expansion-panel v-model="panel[item.Id]">
<v-expansion-panel-content>
<template v-slot:header>
<div>{{ item.Name }}</div>
</template>
<v-card>
<QR justify-center :value="item.Id"></QR>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</div>
Changes for script:
Add panel property inside data object.
Add a method to close other panels
data: {
panel: {},
},
methods: {
closeOtherPanel(id) {
var self = this;
Object.keys(this.panel).map(x => {
if (x != id) self.panel[x] = null;
});
}
}