Tengo un componente modal 'ConfirmModal.vue' de TailwindUI que se puede abrir/cerrar configurando 'const open = ref(true/false)'
<template> <TransitionRoot as="template" :show="open"> <Dialog as="div" class="relative z-10" @close="open = false">"Abrir" se define en la configuración del componente así
<script setup> import { ref } from 'vue' const open = ref(false) </script>Este componente modal se importa al padre 'Edit.vue':
<script> import ConfirmModal from '@/Components/ConfirmModal.vue'; export default { components: { ConfirmModal },Idealmente, quiero establecer "abrir" en verdadero cuando el usuario hace clic en el icono de la papelera. Me las arreglé para pasar algunos accesorios al componente, como un mensaje para mostrar, pero me costó entender lo que se requiere en este caso.
<TrashIcon @click="???"/> <ConfirmModal :title="'Delete client'" :message="'Are you sure you want to delete this client? This action cannot be undone.'"/>Puedes pasar otro accesorio para mostrar/ocultar y verlo:
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>