Trying to make Vue Modal-CodePudding

Im making my first vue modal and I want to make a simple pop up window when you click on a button. I followed a tutorial but it wouldnt work. Then I tried others and... same result. I have no idea what I'm doin wrong!

My modal component code in the template:

<div >
  <button @click="showModal = true">Save</button>
</div>
<transition name="modal-fade">
  <div  @click="$emit('close-modal')">
    <div  @click.stop>
      <h6>Saved!</h6>
      <p>Your Details have been saved Successfully</p>
      <button>Go Home</button>
    </div>
    <div  @click="$emit('close-modal')">
      <img  src="" alt="" />
    </div>
  </div>
</transition>

My modal compant code in the script:

data () {
    return {
        showModal: false
  }
}

When I click the button :

<div ><button u/click="showModal = true">Save</button></div>

absolutely nothing happens and I have no idea why!

CodePudding user response：

You are missing v-if for your Transition

<div v-if="showModal"  @click="$emit('close-modal')">

Also you should stick to the regular syntax so use Transition instead of transition since it is a component.

Here is the working demo of your code