I've a v-data-table inside the expanded-item slot for another data table. I want to access the ID of the parent item within the child. I've tested with a inside the expanded-item slot, in that paragraph, I am able to show the id. However, inside the child data-table, I don't know how to use this value.
<v-data-table
:headers="headers"
:items="financialDocuments"
:single-expand="singleExpand"
item-key="finDocId"
show-expand
>
<template v-slot:expanded-item="{ item }">
<td :colspan="attachmentHeaders.length">
<p>{{item.finDocId}}</p>
<v-data-table
:headers="attachmentHeaders"
:items="item.attachmentPlainDtos"
>
<template v-slot:[`item.attachmentActions`]="{ item }">
<v-icon large #click="removeAttachment(parentItem.Id, item.attachmentId)">
mdi-delete
</v-icon>
</template>
</v-data-table>
</td>
</template>
</v-data-table>
The parent item was already available, just had to rename the reference to it to prevent two "item"s, one is the parent, one is child and refer to the correct one.
<v-data-table
:headers="headers"
:items="financialDocuments"
:single-expand="singleExpand"
item-key="finDocId"
show-expand
>
<template v-slot:expanded-item="{ item: finDoc }">
<td :colspan="attachmentHeaders.length">
<v-data-table
:headers="attachmentHeaders"
:items="finDoc.attachmentPlainDtos"
>
<template v-slot:[`item.attachmentActions`]="{ item }">
<v-icon large #click="removeAttachment(finDoc.Id, item.attachmentId)">
mdi-delete
</v-icon>
</template>
</v-data-table>
</td>
</template>
</v-data-table>
Related
v-data-table keyboard navigation doesn't work, but I found this workaround. Is there any way to make checkboxes checked when they get focus after pressing tab key?
Not working table:
<template>
<v-data-table
v-model="selected"
:headers="headers"
:items="desserts"
single-select
item-key="name"
show-select
class="elevation-1"
>
<template v-slot:item.data-table-select="{ item, isSelected }">
<v-checkbox
:value="isSelected"
hide-details
class="mt-0"
#change="onItemSelect({ item, value: !isSelected })"
></v-checkbox>
</template>
</v-data-table>
</template>
NOTE: headers and items took from Vuetify original example.
I normally would do this
<v-row v-for="(rule, index) in ruleDetails" :key="index">
... I should have access to index then...
... but now ...
I am not inside a v-for I am inside a table.
How can I access index variable of a table ?
<v-data-table
:headers="headers"
:items="rules"
:single-expand="singleExpand"
:expanded.sync="expanded"
item-key="name"
show-expand
class="elevation-0"
>
<template v-slot:top>
<v-toolbar flat>
<v-toolbar-title>{{ name }}</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn outlined class="green--text" #click="showAddRuleModal()">
<v-icon dark> add </v-icon>
Rule
</v-btn>
</v-toolbar>
</template>
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length">{{ item.conditions }}</td>
</template>
<template v-slot:item.id="{ item }">
<v-btn outlined class="orange--text" #click="showEditRuleModal(index)"> Edit </v-btn>
<v-btn outlined class="red--text" #click="showDeleteRuleModal(index)"> Delete </v-btn>
</template>
</v-data-table>
You could get it using the item slot as the second argument:
<template v-slot:item="{ expand, index, item }">
<v-btn outlined class="orange--text" #click="showEditRuleModal(index)"> Edit </v-btn>
<v-btn outlined class="red--text" #click="showDeleteRuleModal(index)"> Delete </v-btn>
</template>
based on the documentation you have access to index if you use item slot: item-slot documentation
but if you don't want to use item slot, you can use a computed to include the index in the objects that you are passing to the v-data-table and that computed is like this:
computed: {
dataTableItems() {
return this.rules.map((x, i) => ({index: i, ...x}));
}
}
then in each slot where you have access to item you can find the index by using item.index
I have a page made with vue using vuetify. It displays a v-data-table which can be expanded to reveal another v-data-table, like this:
<div class="subsection">
<v-data-table
:headers="prescriptionHeaders"
:items="pendingItems"
show-expand
item-key="id"
>
<template v-slot:expanded-item="{headers,item}">
<td :colspan="headers.length">
<v-data-table
:headers="pendingPrestationHeaders"
:items="item.prestations"
v-model="selected"
>
<template v-slot:[`item.actions`]="{ item }">
<div class="table-row-actions">
<v-tooltip left v-if="item.categeoryTypeId === 6">
<template v-slot:activator="{ on, attrs }">
<v-icon
v-bind="attrs"
v-on="on"
#click="func1(item)"
class="action-doc"
>
mdi-file-document-outline
</v-icon>
</template>
<span>blablabla</span>
</v-tooltip>
</div>
</template>
</v-data-table>
</td>
</template>
</v-data-table>
</div>
the problem is that I need to call func1 with a property of the item from the outer v-data-table. How can I access it from within my <template v-slot:[`item.actions`] template ? I know I could include a reference to the parent item in my child item, or just duplicate the data that I need from the parent into the child (that's what I'm currently doing), but I was just curious to find out whether there is a way to refer to the "outer" item in the template slot, but I guess not.
To access the item of the outer v-data-table, you need to change the inner data table with props.item
Something like this should work.
<template v-slot:[`props.item.actions`]="{ props.item }">
<div class="table-row-actions">
<v-tooltip left v-if="props.item.categeoryTypeId === 6">
<template v-slot:activator="{ on, attrs }">
<v-icon
v-bind="attrs"
v-on="on"
#click="func1(item)"
class="action-doc"
>
mdi-file-document-outline
</v-icon>
</template>
<span>blablabla</span>
</v-tooltip>
</div>
</template>
I've exactly the same challenge. I want to access to item ID of the outer v-data-table from the inner one. The paragraph shows the data correctly. How to access this value from the inner data-table?
<template v-slot:expanded-item="{ item }">
<td :colspan="attachmentHeaders.length">
<p>{{item.finDocId}}</p>
<v-data-table
:headers="attachmentHeaders"
:items="item.attachmentPlainDtos"
item-key="finDocId"
disable-pagination
:hide-default-footer="true"
no-data-text='Geen bijlagen'
>
<template v-slot:[`item.attachmentActions`]="{ item }">
<v-icon large #click="removeAttachment(item.id, item.attachmentId)">
mdi-delete
</v-icon>
</template>
</v-data-table>
</td>
</template>
I'm trying to create reusable modal window that should be called by pressing on an icon on each of the v-data-table row. Besides, each icon should have a tooltip on mouse hover.
According to vuetify docs, both actions is using same constructions: v-slot:activator="{ on }" and v-on="on". The question is - is there's a way in Vue/Vuetify to merge this constructions and get the desired behavior?
At the moment I found one way to get what I want by adding addtional <a> tag:
<template>
<v-data-table :headers="headers" :items="tableItems">
<template v-slot:item="props">
<tr>
<td>{{ props.item.text }}</td>
<td>
<some-modal>
<template v-slot:activator="{ on }">
<a v-on="on">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-icon v-on="on" small class="mr-2">delete</v-icon>
</template>
<span>Tooltip message</span>
</v-tooltip>
</a>
</template>
</some-modal>
</td>
</tr>
</template>
</v-data-table>
</template>
But maybe there are any ways to merge v-slot:activator and v-on without an addtional <a> tag?
Codesandbox with current behavior
Stumbled upon solution here, credits to #Yom T.
<v-menu>
<template #activator="{ on: onMenu }">
<v-btn v-on="onMenu">Menu Trigger</v-btn>
<v-tooltip bottom>
<template #activator="{ on: onTooltip }">
<v-btn v-on="{ ...onMenu, ...onTooltip }">Menu Trigger with Tooltip</v-btn>
</template>
<span>Tooltip Content</span>
</v-tooltip>
</template>
</v-menu>
I have a parent component with 2 buttons that I want to use as filters. the child component is called inside a v-data-table.
ScanGrid(parent):
<template>
<v-card class="ma-5" v-else>
<v-flex row xs12 class="pa-3 ml-3">
<div class="mr-3 mt-2">
<h3>Regrouper par :</h3>
</div>
<div>
<v-btn-toggle color="success" v-model="groupBy">
<v-btn
text
value="barCode"
class="lowerCase"
v-ripple="{ class: 'success--text' }"
>
Code barre
</v-btn>
<v-btn
text
value="productDef"
class="lowerCase"
v-ripple="{ class: 'success--text' }"
>
Définition de produit
</v-btn>
</v-btn-toggle>
</div>
</v-flex>
<v-card-text>
<v-layout align-center>
<v-data-table
:headers="headers"
:items="items"
item-key="StorageName"
show-expand
single-expand
:expanded="expanded"
hide-default-footer
#click:row="clickedRow"
>
<template v-slot:expanded-item="{ item }">
<td :colspan="12">
<ScanGridCode :item="item"></ScanGridCode>
</td>
</template>
<template v-slot:expanded-item="{ item }">
<td :colspan="12">
<ScanGridDef :item="item"></ScanGridDef>
</td>
</template>
</v-data-table>
</v-layout>
</v-card-text>
</v-card>
</template>
The children components I want to switch using the buttons are called ScanGridCode and ScanGridDef inside templates in v-data-table. I tried to find examples of filtering buttons online but couldn't find anything like what I want to do.
I'm using Vue 2.6.10 with Vuetify 2.1.7
You're almost done already, since you already have the v-btn-toggle set up with v-model="groupBy". All you still need is to add v-if to each template, like:
<template v-if="groupBy=='barCode'" v-slot:expanded-item="{ item }">