Question

正如标题所示，我想在一个页面上添加两个模态对话框。我想出了如何创建，但第二个我遇到了麻烦。

HTML：

＆＃13;

<body>
  <h1>-projects-</h1>
  <ul id="button-container">
    <li>
      <a id="html-modal-button" @click="showModal = true">
        <img class="htmllogo" src="images/HTMLLogo.png">
        <div class="html-text-block">
          <h2>HTML</h2>
          <p>My web projects</p>
        </div>
      </a>
      <htmlmodal v-if="showModal" @close="showModal = false"></htmlmodal>
    </li>

    <li>
      <a id="cs-modal-button" @click="showModal = true">
        <img class="csharplogo" src="images/CSHARPLogo.png">
        <div class="cs-text-block">
          <h2>C#</h2>
          <p>My windows projects</p>
        </div>
      </a>
      <csmodal v-if="showModal" @close="showModal = false"></csmodal>
    </li>
  </ul>

  <!-- MODAL SECTION -->
  <script type="text/x-template" id="html-modal-template">
    <transition name="html-modal">
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <div class="modal-header">
              <slot name="header">HTML HEADER</slot>
            </div>
            <div class="modal-body">
              <slot name="body">HTML BODY</slot>
            </div>
            <div class="modal-footer">
              <slot name="footer">HTML FOOTER
                <button class="modal-default-button" @click="$emit('close')">OK</button>
              </slot>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </script>

  <script type="text/x-template" id="cs-modal-template">
    <transition name="cs-modal">
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <div class="modal-header">
              <slot name="header">CS HEAD</slot>
            </div>
            <div class="modal-body">
              <slot name="body">CS BODY</slot>
            </div>
            <div class="modal-footer">
              <slot name="footer">CS FOOTER
                <button class="modal-default-button" @click="$emit('close')">OK</button>
              </slot>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </script>

</body>

</html>

＆＃13;

VUE.JS：

$(window).load(function(){
    // CREATE THE DOM COMPONENT
    Vue.component('htmlmodal', {
        template: '#html-modal-template',
    });

    Vue.component('csmodal', {
        template: '#cs-modal-template',
    });


    // START THE APP
    new Vue({
        el:'#button-container',
        data: {
            showModal: false
        }
    })
});

**小提琴：** https://jsfiddle.net/oz053uzj/

正如您所看到的，我已将模态部分分开，因此基本上我可以简单地创建和编辑模态，创建vue.component并引用它。

问题在我尝试打开模式时出现，似乎只打开每个按钮的第二个或最后一个模式，我认为由于@click="showModal = <>"对于两个模态都是一样的，但是我还是一无所知..

Answer 1

因为他们的v-if基于相同的数据showModal。

如果showModal为真，则会显示两者。最后一个将在最重要的位置。

那么如何基于字符串而不是真/假来区分它们呢？

<a id="html-modal-button" @click="showModal = 'html-modal'">

和

<htmlmodal v-if="showModal === 'html-modal'" ...

演示：https://jsfiddle.net/jacobgoh101/oz053uzj/1/

Answer 2

你应该为两个模态使用两个不同的变量。

HTML：

<body>
        <ul id="button-container">
            <li> 
                <a id="html-modal-button" @click="showModal = true">
              First Modal
                </a>
                <htmlmodal v-if="showModal" @close="showModal = false"></htmlmodal>
            </li>

            <li>
                <a id="cs-modal-button" @click="showCsModal = true">
                Second Modal
                </a>
                <csmodal v-if="showCsModal" @close="showCsModal = false"></csmodal>
            </li>
        </ul>

        <!-- MODAL SECTION -->
        <script type="text/x-template" id="html-modal-template">
            <transition name="html-modal">
                    <div class="modal-mask">
                        <div class="modal-wrapper">
                            <div class="modal-container">
                                <div class="modal-header">
                                    <slot name="header">HTML HEADER</slot>
                                </div>
                                <div class="modal-body">
                                    <slot name="body">HTML BODY</slot>
                                </div>
                                <div class="modal-footer">
                                    <slot name="footer">HTML FOOTER
                                        <button class="modal-default-button" @click="$emit('close')">OK</button>
                                    </slot>
                                </div>
                            </div>
                        </div>
                    </div>
            </transition>
        </script>

        <script type="text/x-template" id="cs-modal-template">
            <transition name="cs-modal">
                    <div class="modal-mask">
                        <div class="modal-wrapper">
                            <div class="modal-container">
                                <div class="modal-header">
                                    <slot name="header">CS HEAD</slot>
                                </div>
                                <div class="modal-body">
                                    <slot name="body">CS BODY</slot>
                                </div>
                                <div class="modal-footer">
                                    <slot name="footer">CS FOOTER
                                        <button class="modal-default-button" @click="$emit('close')">OK</button>
                                    </slot>
                                </div>
                            </div>
                        </div>
                    </div>
            </transition>
        </script>
    </body>

VUE.JS：

new Vue({
    el:'#button-container',
    data: {
        showModal: false,
  showCsModal: false,
    }
})

**小提琴：** https://jsfiddle.net/tanvir86/od2cjtkc/

使用VUE在一个页面上创建多个模态

2 个答案: