无法在VueJS2

Question

我试图关闭我的模态时遇到了奇怪的行为。我写了一些方法来显示和关闭模态

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

通过单击表格的行

，应显示模态

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

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

我尝试使用单独的组件渲染它，但暂时将所有内容都放在一个如果我尝试打开模态，一切都很好用模态https://pp.userapi.com/c638017/v638017273/39134/98lcFy5OWvc.jpg

截屏

但是如果我试图关闭我的控制台输出屏幕截图有问题，它会记录console.log（this.show）;两次不同的参数。莫代尔也不会关闭。 https://pp.userapi.com/c638017/v638017273/39148/mIpSQMQYLNg.jpg

抱歉，我不知道如何在jsfiddle创建简化版项目，粘贴整个组件代码

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

谢谢！

Answer 1

看起来你有一个带有@click的tr在所有东西之上，所以当你点击按钮时

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

这个点击也被传播到主tr，所以Pradeepb几乎拥有它，我想你应该尝试

v-on:click.stop="closeModal"

这将导致点击停止传播到tr，因为现在正在关闭模态并同时打开模态。

另外，不要在TR上使用click事件，尝试使用div重新构造，TR上的onclick事件会导致奇怪的行为