无法在 VueJS2 中关闭模式

Question

我运行在尝试关闭我的模式时进入 st运行ge 行为。我写了方法来显示和关闭模态

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

点击 table

的行应该会出现模式

<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 上创建项目的简化版本，将整个组件代码粘贴在这里

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

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

v-on:click.stop="closeModal"

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

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

无法在 VueJS2 中关闭模式

Can't close modals in VueJS2

vue.js

vue-component

vuejs2