I am having trouble displaying a confirmation component every time a button in the header is clicked. Currently, it only opens when clicking elements outside of the dropdown using v-menu.
App.vue
<template>
{{isConfirmDialogVisible}}
<div class="header">
<div class="left-menus">
<div
v-for="(item, index) in items"
:key="index"
class="menu"
style="background-color: red; gap: 10px; padding: 10px"
@click="opendialog()"
>
{{ item.title }}
</div>
</div>
<v-menu open-on-hover transition="slide-y-transition">
<template #activator="{ props }">
<div style="cursor: pointer">
<v-icon v-bind="props">mdi-menu-down</v-icon>
</div>
</template>
<v-list>
<v-list-item
v-for="(item, index) in userOptions"
:key="index"
class="dropdown"
@click="opendialog()"
>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<Confirmation
v-model="isConfirmDialogVisible"
v-if="isConfirmDialogVisible"
action-button="submit"
action-button-left="cancle"
action-button-right="confirm"
>
<div style="font-size: 20px">Are you sure？</div>
</Confirmation>
</div>
</template>
<script>
import { ref } from 'vue'
import Confirmation from './Confirmation.vue'
const isConfirmDialogVisible = ref(false)
const userOptions = ref([{ title: 'Logout' }, { title: 'Setting' }])
const opendialog = () => {
isConfirmDialogVisible.value = true
}
export default {
components: {
Confirmation,
},
data: () => ({
items: [
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me 2' },
],
opendialog,
isConfirmDialogVisible,
userOptions,
}),
}
</script>
<style>
.header .left-menus {
display: flex;
align-items: center;
gap: 16px;
}
</style>
Confirmation.vue
<template>
<v-dialog v-model="dialogVisible" persistent activator="parent" width="auto">
<div class="dialog_container">
<v-card>
<div class="card-components">
<div class="warning_image"></div>
<v-card-text>
<slot></slot>
</v-card-text>
<v-card-actions>
<v-btn class="back" @click="closeDialog"
>{{ actionButtonLeft }}</v-btn
>
<v-btn @click="confirmSelection" class="confirm-submit">
{{ actionButtonRight}}
</v-btn>
</v-card-actions>
</div>
</v-card>
</div>
</v-dialog>
</template>
<script>
import { ref } from 'vue'
export default {
props: {
modelValue: Boolean,
actionButton: {
type: String,
required: true,
},
actionButtonRight: {
type: String,
required: true,
},
actionButtonLeft: {
type: String,
required: false,
default: 'cancel',
},
},
emits: ['update:modelValue', 'confirmAction'],
setup(props, { emit }) {
const dialogVisible = ref(false)
const closeDialog = () => {
dialogVisible.value = false
emit('update:modelValue', false)
}
const confirmSelection = () => {
closeDialog()
emit('confirmAction')
}
const returnBack = () => {
closeDialog()
}
const handleOutsideClick = event => {
console.log(event)
}
return {
dialogVisible,
closeDialog,
returnBack,
confirmSelection,
handleOutsideClick,
}
},
}
</script>
<style scoped>
.card-components {
display: flex;
flex-direction: column;
gap: 24px;
}
.dialog_container {
height: 225px;
width: 648px;
}
.v-card {
padding: 16px 24px 24px 24px;
}
.v-card-text {
padding: 0;
}
.warning_image {
display: flex;
width: 100%;
justify-content: center;
}
.v-card-actions {
min-height: 0;
padding: 0;
display: flex;
justify-content: flex-end;
}
.v-card-actions .v-btn {
border: 1px solid #9ca3af;
color: #9ca3af;
width: 140px;
justify-content: center;
align-items: center;
border-radius: 4px;
}
.v-card-actions .confirm-submit {
color: white;
border: 1px solid #41a1e0;
background: #41a1e0;
}
</style>
I am facing issues with showing a confirmation component whenever a button is clicked in the header. It seems to be opening only when elements other than the dropdown are clicked using v-menu.