CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Micha
Micha

Reputation: 33

Trying to make Vue Modal

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

My modal compant code in the script:

data () {
    return {
        showModal: false
  }
}

When I click the button :

<div class="save-btn"><button u/click="showModal = true">Save</button></div>

absolutely nothing happens and I have no idea why!

Upvotes: 0

Views: 2122

Answers (1)

Vojin Purić
Vojin Purić

Reputation: 2385

You are missing v-if for your Transition

<div v-if="showModal" class="modal-overlay" @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

Upvotes: 1

Related Questions