I'm attempting to develop a custom component based on vuetify's v-menu component.
This menu should be invoked from vuetify's dialog in two scenarios:
- By clicking the "Add row" button located at the top of the dialog content
- By clicking on the "Edit" icon button on each row of the v-data-table component
The key point is that the same menu should appear in both cases. The difference lies in the calling component - for the first case, it should be a v-btn with specific text, and for the second case, a v-icon with a specific icon.
Based on the vue and vuetify documentation, I believe I need to redefine v-slot:activator, but I'm encountering difficulties where the component always defaults to a specific value for v-slot:activator.
Using Vue 2.6.11 and Vuetify 2.2.3.
Below is the code snippet:
Dialog.vue:
<template>
<v-dialog v-model="dialog" max-width="500px" persistent>
<v-card>
<v-card-title>
<v-spacer></v-spacer>
<menu-component/>
</v-card-title>
<v-card-text>
<v-data-table
:headers="tableHeaders"
:items="tableContent"
>
<template v-slot:item="props">
<tr>
<td>{{ props.item.id }}</td>
<td>{{ props.item.text }}</td>
<td class="text-center">
<menu-component>
<template v-slot:activator="{ on }">
<v-icon v-on="on">mdi-pencil</v-icon>
</template>
</menu-component>
</td>
</tr>
</template>
</v-data-table>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="close">{{ "Close dialog" }}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
import MenuComponent from "./MenuComponent";
export default {
components: {
'menu-component': MenuComponent
},
data() {
return {
tableContent: [
{ id: 1, text: 'some text'}
],
tableHeaders: [
{text: 'ID'},
{text: 'Text'},
{text: 'Actions', align: 'center'}
]
}
},
props: {
dialog: Boolean
},
methods: {
close() {
this.$emit('close-dialog');
}
}
}
</script>
MenuComponent.vue:
<template>
<v-menu bottom left
v-model="menu"
:close-on-content-click="false">
<template v-slot:activator="{ on }">
<v-btn v-on="on">Add row</v-btn>
</template>
<v-card width="300">
<v-container>
<v-layout wrap>
<v-text-field label="Text"/>
</v-layout>
</v-container>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="menu=false">{{ "Close" }}</v-btn>
</v-card-actions>
</v-card>
</v-menu>
</template>
<script>
export default {
data() {
return {
menu: false,
}
}
}
</script>
Intended Design:
https://i.sstatic.net/WLz8H.png
Current Output: