Question

我尝试使用vuejs打开一个简单的bootstrap模式，但没有任何反应。我想创建一个类似vue组件和触发器的模态，而不是使用index.html上的按钮

这是vuejs组件

Vue.component("modal", {

template: `
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>This is a small modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>
`
});

这是HTML

<div id="root">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" @click="openModal">
    Launch modal
</button>
</div>

<script>
vue = new Vue({
    el: '#root',
    data: {
        showModal: false
    },
    methods: {
        openModal: function () {
            this.showModal = true
        }
    }
});

Answer 1

您的设置通常是正确的，但您未在模板中使用showModal，而且您的HTML中未包含模板（modal组件）。

做这两件事，它会奏效。

带引导模态的Vuejs

1 个答案: