How to close a div on click in vue js?

Question

I have added a close button to a div in Calendly popup in VueJS and I want to close this div when click on the close button. How can I do this?

This is my Calendly Code:

<TransitionRoot as="template" :show="openTimes">
<Dialog
  as="div"
  class="fixed inset-0 overflow-y-auto"
  @close="closeModal"
  :open="openTimes"
  :initialFocus="closeModalTimesRef"
>

And this is the button I have added

<button type="button" class="close" 
@click="$emit('close')"> X 
 </button>

Answer 1

You can use something like this :

<button onclick="showOrCloseDiv()">Click The Button</button>
<div id="thedivid">
JS tuto
</div>
<script>
   function showOrCloseDiv() {
      var v = document.getElementById("thedivid");
      if (v.style.display === "none") {
         v.style.display = "block";
      } else {
         v.style.display = "none";
      }
   }
</script>

Answer 2

You probably want to use the v-if directive (or other methods of conditional rendering available in the link).

Usually you set a key like: showDialog: true in your data/state object and add it to your dialog and catch the close event like so:

<script>
  data() {
    return {
      showDialog: true;
    };
  },
</script>
<template>
  <dialog
    v-if="showDialog"
    @close="showDialog = false;"
  />
</template>