为什么我的V-在使用VUE模态时不发射

Question

我正在使用v-if来控制我的vue应用中的页面。"页面"数据属性会跟踪当前页面，并通过按钮点击更新。这可以很好地工作，直到我引入模式为止，就像现在我打开模态并浏览几页(使用我的应用程序的导航按钮(时，该页面尽管属性得到了正确更新，但该页面仍未显示。

。

这是一个简化的示例 - 导航到b，然后c显示模式2.取消模式2，然后导航到B页，没有显示(尽管标题表示页面属性为b(。

https://jsfiddle.net/flmq0dxn/1/

我已经尝试使用Bootstrap模式和本机JS模式，但也会发生同样的问题。控制台中没有报告错误。我认为它可能是错误的嵌套divs，但我已经检查了这些并将其放在验证器中。

我意识到我的导航方法是原始的，模式可能应该是组件，但是我是一个新手，据我了解，我的方法"应该"工作。谁能解释为什么它不请？

html：

<div id="app">
  <p>(app.page = {{page}})</p>
  <br/>
  <div class="page" id="A" v-if="page=='A'">
  Page A
  <br/>
  <button v-on:click="pager('B')">To B</button>
  </div>
  <div class="page" id="B" v-if="page=='B'">
  Page B
  <br/>
  <button v-on:click="pager('C')">To C</button>
  <button v-on:click="modalOpen('mod1')">Modal</button>
  </div>
  <!-- ************ Modal 1 ************************************ -->
  <div id="mod1" class="mod">
    <div class="mod-content">
      <span class="mod-close" v-on:click="modalClose">&times;</span>
      <h1>Modal 1</h1>
      <button v-on:click="modalClose" class="btn btn-secondary">Cancel</button>
    </div>
  </div>

  <div class="page" id="C" v-if="page=='C'">
  Page C
  <br/>
  <button v-on:click="pager('B')">To B</button>
  <button v-on:click="modalOpen('mod2')">Modal</button>
  </div>

     <!-- ************ Modal 2 ************************************ -->
  <div id="mod2" class="mod">
    <div class="mod-content">
      <span class="mod-close" v-on:click="modalClose">&times;</span>
      <h1>Modal 2</h1>
      <button v-on:click="modalClose" class="btn btn-secondary">Cancel</button>
    </div>
  </div>
</div>

CSS：

/* The Modal (background) */
.mod {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  /* Modal Content/Box */
  .mod-content {
    background-color: #fefefe;
    margin: 20% auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius:8px;
    width: 90%;
    max-width:800px;
  }
  /* The Close Button */
  .mod-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  .mod-close:hover,
  .mod-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

javaScript：

new Vue({
  el: "#app",
  data: {
        page: "A"
  },
  methods: {
    pager: function(target){
        this.page=target;
    },
    modalOpen: function(modID) {
        $('#'+ modID).css('display','block');
      },
    modalClose: function(){     
            $('.mod').css('display','none');
    }
  }
})

Answer 1

不幸的是，将vue与jQuery结合在一起是有风险的。

在您的具体情况下，似乎当您尝试关闭模态时，jQuery在" mod"中寻找所有元素。上课，但是当隐藏它们时，选择会被VUE篡改，最终您会隐藏不正确的元素(在您的情况下是页面B的内容(。Vue并非设计为其他图书馆摆弄了Dom。

您可以轻松地quot仅使用VUE实现目标。由于您通过更改模态来管理自己的模态，因此可以使用VUE类和/或样式绑定类似的事情。

例如。您可以拥有一个覆盖display: none的类，并且根据数据有条件地应用该类，与您的页面相似。您甚至可以使用v-if来管理模态，就像您对页面一样。

有条件类别的示例：https：//jsfiddle.net/jfx8mbya/

由V-IF管理的模态示例：

new Vue({
  el: "#app",
  data: {
    page: "A",
    modal: null
  },
  methods: {
    pager: function(target) {
      this.page = target;
    },
    modalOpen: function(modID) {
      this.modal = modID;
    },
    modalClose: function() {
      this.modal = null;
    }
  }
})

/* The Modal (background) */
.mod {
  /*display: none;*/
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.mod-content {
  background-color: #fefefe;
  margin: 20% auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
}

/* The Close Button */
.mod-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.mod-close:hover,
.mod-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p>(app.page = {{page}})</p>
  <br/>
  <div class="page" id="A" v-if="page=='A'">
    Page A
    <br/>
    <button v-on:click="pager('B')">To B</button>
  </div>
  <div class="page" id="B" v-if="page=='B'">
    Page B
    <br/>
    <button v-on:click="pager('C')">To C</button>
    <button v-on:click="modalOpen('mod1')">Modal</button>
  </div>
  <!-- ************ Modal 1 ************************************ -->
  <div id="mod1" class="mod" v-if="modal === 'mod1'">
    <div class="mod-content">
      <span class="mod-close" v-on:click="modalClose">&times;</span>
      <h1>Modal 1</h1>
      <button v-on:click="modalClose" class="btn btn-secondary">Cancel</button>
    </div>
  </div>

  <div class="page" id="C" v-if="page=='C'">
    Page C
    <br/>
    <button v-on:click="pager('B')">To B</button>
    <button v-on:click="modalOpen('mod2')">Modal</button>
  </div>

  <!-- ************ Modal 2 ************************************ -->
  <div id="mod2" class="mod" v-if="modal === 'mod2'">
    <div class="mod-content">
      <span class="mod-close" v-on:click="modalClose">&times;</span>
      <h1>Modal 2</h1>
      <button v-on:click="modalClose" class="btn btn-secondary">Cancel</button>
    </div>
  </div>
</div>