VueJS2でモーダルを閉じることができません

Question

モーダルを閉じようとしたときに異常な動作が発生しました。私は別々の部品でそれをレンダリングしようとしましたが、一時的に場合は1にすべてをかけるモーダルは、テーブルの行に

<tr class="hover-hand" @click="showModal"> 

<div v-show="show" class="modal is-active"> 

をクリックすることで表示されます

表示するようにする方法を書いて、近くモーダル

methods: { 
showModal: function() { 
    this.show = true; 
    console.log(this.show); 
}, 
closeModal: function() { 
    this.show = false; 
    console.log(this.show); 
}, 

私はモーダルを開こうとしています。すべてはOKです。モーダルではスクリーンショットが https://pp.userapi.com/c638017/v638017273/39134/98lcFy5OWvc.jpgです。

しかし、私は閉じるためにコンソールの出力でいくつかの問題のスクリーンショットを持っています。console.log（this.show）;異なるパラメータで2回モーダルも閉じません。 https://pp.userapi.com/c638017/v638017273/39148/mIpSQMQYLNg.jpg

ここで私はjsfiddleでプロジェクトの簡易版を作成する方法を知りません申し訳ありませんが、貼り付けられた全コンポーネントのコード

<template> 
 
    <tr class="hover-hand" @click="showModal"> 
 
    <td>{{ beer.name }}</td> 
 
    <td>{{ beer.home }}</td> 
 
    <td>{{ beer.sort }}</td> 
 
    <td>{{ beer.density }}</td> 
 
    <td>{{ beer.alcohol_content }}</td> 
 
    <td>{{ beer.ibu }}</td> 
 
    <td> 
 
     <span class="icon"> 
 
     <i v-if="beer.on_tap === true" v-bind:style="{ color: activeColor }" class="fa fa-check" aria-hidden="true"></i> 
 
     </span> 
 
    </td> 
 
     <div v-show="show" class="modal is-active"> 
 
     <div class="modal-background"></div> 
 
     <div class="modal-content"> 
 
      <div class="card"> 
 
      <div class="card-content"> 
 
       <p class="title"> 
 
       {{ beer.name }} 
 
       </p> 
 
       <p class="subtitle"> 
 
       Jeff Atwood 
 
       </p> 
 
      </div> 
 
      <footer class="card-footer"> 
 
       <p class="card-footer-item"> 
 
       <span> 
 
        View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a> 
 
       </span> 
 
       </p> 
 
       <p class="card-footer-item"> 
 
       <span> 
 
        Share on <a href="#">Facebook</a> 
 
       </span> 
 
       </p> 
 
      </footer> 
 
      </div> 
 
     </div> 
 
     <button class="modal-close" @click="closeModal"></button> 
 
     </div> 
 
    </tr> 
 
    
 
</template> 
 

 
<script> 
 
import SingleBeerModal from '@/components/Beerlist/SingleBeerModal'; 
 

 
export default { 
 
    name: 'SingleBeer', 
 
    data() { 
 
    return { 
 
     activeColor: 'green', 
 
     show: false, 
 
    }; 
 
    }, 
 
    methods: { 
 
    showModal: function() { 
 
     this.show = true; 
 
     console.log(this.show); 
 
    }, 
 
    closeModal: function() { 
 
     this.show = false; 
 
     console.log(this.show); 
 
    }, 
 
    }, 
 
    components: { 
 
    'beer-modal': SingleBeerModal, 
 
    }, 
 
    props: ['beer'], 
 
}; 
 

 
</script> 
 

 
<style> 
 
</style>

ありがとうございます！

Answer 1

あなたはすべてのものの上に@clickとTRを持っているように見えるので、あなたがボタン

<button class="modal-close" @click="closeModal"></button> 

をクリックすると、このクリックは、それはほとんどそれを持っていたPradeepbので、メインTRに伝播されています、私は今のモーダルを閉じ、同時にモーダルを開いているので、あなたが、TRまで伝播する停止します原因となります

v-on:click.stop="closeModal" 

これを試してみるべきだと思います。

また、TRにイベントをクリックし使用していない、divを使用してreestructurateしようとすると、TR上のonclickイベントは、奇妙な行動