我在vuejs项目的main.js中导入了bootstrap和jquery。像这样
import $ from "jquery"; // importing jquery
import Popper from "popper.js"; //importing popper js for dropdowns and other stuff bootstrap
import "bootstrap"; // importing bootstrap
import "bootstrap/dist/css/bootstrap.min.css"; //importing dist bootstrap
在我的另一个组件中，有一个模型。我希望它在我成功地发出网络请求时关闭。
在上面的模型中，如果按yes，它将在method属性上激发DeletePost(postid)函数
deletePost(postid) {
this.$store.dispatch("blog/deletePost", posted);
$("#deletePostModel").modal("hide");
}
但这会引发一个错误。即未定义错误'$'。因此在该组件中导入jquery，然后错误就消失了。
但现在我得到[Vue warn]:v-on处理程序中的错误：“TypeError：jquery__WEBPACK_IMPORTED_MODULE_1___default()（...）.modal不是函数”在我的deletePost函数中$（“#DeletePostModel”）.modal（“hide”）；模型函数无法识别。我尝试了很多不同的方法
我只想知道如何隐藏模型后，我的网络请求完成，当我点击yes按钮在模型。
我更喜欢的一种选择是创建自己的模态组件，并将jQuery从等式中剔除。下面是一个基于我创建的其他情态动词的示例。并且您仍然可以使用引导类进行造型。
BootstrapModalAlt.Vue
<template>
<div class="bootstrap-modal-alt">
<div id="modal-dialog" class="modal-dialog-container">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ titleContent }}</h5>
<button type="button" class="close" @click="closeModal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>{{ bodyContent }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" @click="saveChanges">Save changes</button>
<button type="button" class="btn btn-secondary" @click="closeModal">Cancel</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
titleContent: {
type: String,
required: true
},
bodyContent: {
type: String,
required: true
}
},
methods: {
closeModal() {
this.$emit('close-modal-event');
},
saveChanges() {
this.$emit('save-changes-event');
}
}
}
</script>
<style scoped>
.modal-dialog-container {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
margin: 10% auto;
width: 60%;
}
</style>
Parent.Vue
<template>
<div class="parent">
<h4>Demo of Alternative to Bootstrap 4 Modal</h4>
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-secondary" @click="showModal = true">Show Modal</button>
</div>
</div>
<bootstrap-modal-alt v-if="showModal"
:titleContent="modalTitle"
:bodyContent="modalBody"
@close-modal-event="closeModal"
@save-changes-event="saveChanges" />
</div>
</template>
<script>
import BootstrapModalAlt from './BootstrapModalAlt.vue'
export default {
components: {
BootstrapModalAlt
},
data() {
return {
showModal: false,
modalTitle: "Modal Title",
modalBody: "Modal Body"
}
},
methods: {
closeModal() {
this.showModal = false;
},
saveChanges() {
// Add logic to save changes
this.closeModal();
}
}
}
</script>
