我想显示和隐藏一个 Bootstrap 模式对话框,其中这个对话框是一个 vue 组件,我可以使用 props 自定义它的常量(消息、按钮)。
我使用 v-if='show'
来显示它,但问题是我无法将 show
设置为 false
通过单击模态背景关闭模态。结果,对话框显示一次,但当它关闭时,当我第二次按下删除按钮时,它不会再次显示。
我有一个名为“person”的 vue.js 组件,它包含另一个组件“confirm-delete”,如下所示:
Person.vue:
<template>
<div>
<confirm-delete v-if="show" :msg="deleteMsg"></confirm-delete>
<!-- person details -->
<button @click="confirmDelete">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</template>
<script>
export default {
data () {
return {
show: false,
deleteMsg: ''
}
},
methods: {
confirmDelete () {
this.show: true,
this.deleteMsg: 'Are you sure you want to delete this person?'
}
}
}
</script>
ConfirmDelete.vue:
<template>
<div id="modalDelete" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="media-body">
<p>{{msg}}</p>
</div>
</div>
</div>
</div>
<template>
<script>
export default {
props: ['msg'],
mounted: function(){
$('#modalDelete').modal('show')
}
}
</script>
当然,如果我通过将对话框的代码包含到 person 中来仅使用一个组件,这也是可行的。但我的目标是将此对话框组件重用到我应用程序的其他部分。
知道我该怎么做吗?
最佳答案
我会在你的 Person.vue
模板中为你的 confirm-delete
组件标签添加一个 ref
属性,然后给 ConfirmDelete.vue
一个 show
方法,它只是触发 Bootstrap 方法。这样您就可以通过 this.$refs.modal.show()
从父级中的 confirmDelete
方法触发 Bootstrap 方法。 More info on refs.
Person.vue:
<template>
<div>
<confirm-delete ref="modal" :msg="deleteMsg"></confirm-delete>
<!-- person details -->
<button @click="confirmDelete">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</template>
<script>
export default {
data () {
return {
show: false,
deleteMsg: ''
}
},
methods: {
confirmDelete () {
this.$refs.modal.show();
this.deleteMsg: 'Are you sure you want to delete this person?'
}
}
}
</script>
确认删除.vue:
<template>
<div id="modalDelete" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="media-body">
<p>{{msg}}</p>
</div>
</div>
</div>
</div>
<template>
<script>
export default {
props: ['msg'],
methods: {
show: function() {
$('#modalDelete').modal('show')
},
}
}
</script>
关于jquery - 如何将 Bootstrap 对话框用作 vueJs 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43232270/