CODEWITHSUNDEEP
vue.js
Harout
Harout

Reputation: 174

Vue Js modal opening but not closing when being clicked

seemore.vue:

<template>
<div id="app">
<button type="button" class="btn btn-primary" v-on:click='ShowModal'>
Show
</button>
<div class="card" v-show="Modal">
<div class="card-header">
  This is the header <button @click='$emit(close)' @close="Modal=false" class="float-right">&times;</button>
  </div>
  <div class="card-body">
This is the body
  </div>
</div>
</div>
</template>
<script>
export default {  
    el: '#app',
    data(){
        return {
          Modal:false,
        }
      },
methods: {
  ShowModal(){
  this.Modal=true;
  }
},
};

index.blade.php:

<div id="app">
    <seemore></seemore>
</div>

When i click the button the modal is showing, it is working but when i press the X button the modal is not hiding, i do not know what seems to be the problem.. but i am new to Vue Js so i may be doing something wrong

Upvotes: 0

Views: 346

Answers (2)

LHJ
LHJ

Reputation: 692

How about this, set Modal to false when x button click

<template>
<div id="app">
<button type="button" class="btn btn-primary" v-on:click='ShowModal'>
Show
</button>
<div class="card" v-show="Modal">
<div class="card-header">
  This is the header <button @click='Modal=false' class="float-right">&times;</button>
  </div>
  <div class="card-body">
This is the body
  </div>
</div>
</div>
</template>
<script>
export default {  
    el: '#app',
    data(){
        return {
          Modal:false,
        }
      },
methods: {
  ShowModal(){
  this.Modal=true;
  }
},
};

Upvotes: 1

Ilijanovic
Ilijanovic

Reputation: 14904

Well try it like this

@click='Modal = false'

Upvotes: 1

Related Questions