Javascript 引导模式不';在vue实例外部定义模式时无法工作
我正在尝试从vue实例中打开一个引导模式 如果我在函数中找到模态元素,该函数就会工作。但是,如果我将模态元素声明为实例外部或vue数据对象中的变量,模态将被破坏(背景出现,但我看不到模态) 这是我的密码:Javascript 引导模式不';在vue实例外部定义模式时无法工作,javascript,jquery,twitter-bootstrap,vue.js,bootstrap-modal,Javascript,Jquery,Twitter Bootstrap,Vue.js,Bootstrap Modal,我正在尝试从vue实例中打开一个引导模式 如果我在函数中找到模态元素,该函数就会工作。但是,如果我将模态元素声明为实例外部或vue数据对象中的变量,模态将被破坏(背景出现,但我看不到模态) 这是我的密码: <div id="app"> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="mo
<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>
我已创建一个用于显示问题的属性。您可以使用该属性:
<div class="modal fade" id="myModal" ref="modal">
更新的fiddle:而不是在数据
对象中设置“#myModal”而不是$(“#myModal”)
const app = new Vue({
el: '#app',
data: {
'modal': '#myModal'
},
methods: {
makeBrokenModal(event) {
$(this.modal).modal('show')
}
}
});
$(this.$refs.modal).modal('show');
const app = new Vue({
el: '#app',
data: {
'modal': '#myModal'
},
methods: {
makeBrokenModal(event) {
$(this.modal).modal('show')
}
}
});