[英]Bootstrap modal doesn't work when modal defined outside of vue instance
我正在尝试从 vue 实例中打开引导模式。
如果我在函数中找到模态元素,则该函数有效。 但是,如果我将模态元素声明为实例外部或 vue 数据对象中的变量,则模态被破坏(背景出现但我看不到模态)。
这是我的代码:
<div id="app">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button class="btn btn-default" data-target="#myModal" @click="makeNormalModal">Normal Modal</button>
<button class="btn btn-danger" data-target="#myModal" @click="makeBrokenModal">Broken Modal</button>
</div>
和javascript:
let modalElement = $('#myModal');
const app = new Vue({
el: '#app',
data: {
'modal': $('#myModal')
},
methods: {
makeNormalModal() {
let element = $(event.target);
$('#myModal').modal('show');
},
makeBrokenModal() {
this.modal.modal('show');
}
}
});
我创建了一个jsfiddle来显示这个问题。
而不是 $('#myModal') 在data
对象中设置 '#myModal' 。
const app = new Vue({
el: '#app',
data: {
'modal': '#myModal'
},
methods: {
makeBrokenModal(event) {
$(this.modal).modal('show')
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.