I have a modal component 'ConfirmModal.vue' from TailwindUI which can be opened/closed by setting 'const open = ref(true/false)'
<template>
<TransitionRoot as="template" :show="open">
<Dialog as="div" class="relative z-10" @close="open = false">
"Open" is defined in the setup of the component like so
<script setup>
import { ref } from 'vue'
const open = ref(false)
</script>
This modal component is imported into the parent 'Edit.vue':
<script>
import ConfirmModal from '@/Components/ConfirmModal.vue';
export default {
components: {
ConfirmModal
},
Ideally, I want to set "open" to true when the user clicks the TrashIcon. I've managed to pass some props into the component, like a message to display, but struggling to understand what is required in this case.
<TrashIcon @click="???"/>
<ConfirmModal :title="'Delete client'" :message="'Are you sure you want to delete this client? This action cannot be undone.'"/>
You can pass another prop for showing/hiding and watch it:
const { ref, watch } = Vue
const app = Vue.createApp({
setup() {
const isActive = ref(false)
return { isActive }
}
})
app.component('modal', {
template: `
<div v-show="active">
<h3>{{ title }}</h3>
<p>{{ message }}</p>
<button @click="active = !active">close</button>
</div>
`,
props: ['open', 'title', 'message'],
setup(props) {
const active = ref(props.open)
watch(
() => props.open,
() => active.value = true
);
return { active }
}
})
app.mount('#demo')<script src="https://unpkg.com/vue@3"></script>
<div id="demo">
<button @click="isActive = !isActive">toggle modal</button>
<modal :open="isActive" :title="'Delete client'" :message="'Are you sure you want to delete this client? This action cannot be undone.'"/>
</div>