使用vue.js 2.0打开引导模态

试图编写一个使用VueJS过渡来操作本地Bootsrap动画的代码。

HTML：

<div id="exampleModal">
  <!-- Button trigger modal-->
  <button class="btn btn-primary m-5" type="button" @click="showModal = !showModal">Launch demo modal</button>
  <!-- Modal-->
  <transition @enter="startTransitionModal" @after-enter="endTransitionModal" @before-leave="endTransitionModal" @after-leave="startTransitionModal">
    <div class="modal fade" v-if="showModal" ref="modal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button class="close" type="button" @click="showModal = !showModal"><span aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">...</div>
          <div class="modal-footer">
            <button class="btn btn-secondary" @click="showModal = !showModal">Close</button>
            <button class="btn btn-primary" type="button">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </transition>
  <div class="modal-backdrop fade d-none" ref="backdrop"></div>
</div>

Vue.JS：

var vm = new Vue({
  el: "#exampleModal",
  data: {
    showModal: false,
  },
  methods: {
    startTransitionModal() {
      vm.$refs.backdrop.classList.toggle("d-block");
      vm.$refs.modal.classList.toggle("d-block");
    },
    endTransitionModal() {
      vm.$refs.backdrop.classList.toggle("show");
      vm.$refs.modal.classList.toggle("show");
    }
  }
});

在Codepen上的示例，如果您不熟悉Pug，请在“ HTML”部分的下拉窗口中单击“ 查看编译的HTML ”。

这是Modals如何在Bootstrap中工作的基本示例。如果有人将其用于一般用途，我将不胜感激。

有一个很棒的代码🦀！

我做了Vue.js Modal示例和Bootstrap 3. *实时演示的混合物。

基本上，我使用了Vue.js模态示例，但用引导模态html标记替换了（排序）了Vue.js“ html”部分，省了一件事（我认为）。我不得不div从bootstrap 3上剥掉外面，然后就可以了，瞧！

因此，相关代码与引导程序有关。只需从引导标记中删除外部div，它就可以工作。所以...

ugh，面向开发人员的网站，我无法轻松粘贴代码？对我来说，这是一个严重的持续问题。我是唯一一个？根据历史，我简直是个白痴，有一种简单的粘贴代码的方法，请告知。每次尝试时，充其量都是可怕的格式化技巧。如果需要的话，我将提供一个样本jsfiddle来说明我的操作方式。