Vue.js 引导模式从VUE隐藏方法
我有一个vuejs组件,它显示一个模式对话框,里面有一个小表单。当表单提交时,我想隐藏模式,但不知道如何做。提交时,表单调用父级中的方法 这是组件代码Vue.js 引导模式从VUE隐藏方法,vue.js,vuejs2,bootstrap-4,Vue.js,Vuejs2,Bootstrap 4,我有一个vuejs组件,它显示一个模式对话框,里面有一个小表单。当表单提交时,我想隐藏模式,但不知道如何做。提交时,表单调用父级中的方法 这是组件代码 <template> <div> <div id="todoModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content">
<template>
<div>
<div id="todoModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{ title }}</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<form id="todoForm" @submit.prevent="$emit('save')">
<div class="form-group">
<label for="name">Todo name</label>
<input
id="name"
v-model="todo.name"
type="text"
class="form-control"
aria-describedby="nameHelp"
placeholder="Enter Todo Name"
/>
<small id="nameHelp" class="form-text text-muted"
>Enter your todo's name</small
>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary mr-4" type="submit" form="todoForm">
<span v-if="mode == 'create'">Create</span>
<span v-if="mode == 'update'">Update</span>
</button>
<button
type="button"
class="btn btn-danger mr-auto"
data-dismiss="modal"
@click="
$parent.showModal = false;
$parent.getTodos();
"
>
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "CreateTodo",
props: ["mode", "title", "todo", "showModal"],
ref: "createTodoModal",
mounted() {
if (this.mode == "create") {
this.title = "Create Todo";
}
},
methods: {}
};
</script>
<style scoped></style>
{{title}}
&时代;
待办事项名称
输入您的待办事项名称
创造
更新
取消
导出默认值{
名称:“CreateTodo”,
道具:[“模式”、“标题”、“待办事项”、“展示模式”],
参考:“createTodoModal”,
安装的(){
如果(this.mode==“创建”){
this.title=“创建待办事项”;
}
},
方法:{}
};
这是我的APP.js文件
<template>
<div id="app" class="container mt-5">
<router-view
ref="createtodo"
class="CreateTodo"
name="a"
:todo="todo"
:title="title"
:mode="mode"
:show-modal="showModal"
@save="saveTodo"
></router-view>
</div>
</template>
<script>
import { APIService } from "./APIServices";
const apiService = new APIService();
export default {
name: "App",
data: function() {
return {
mode: "create",
title: "Create Todo",
todo: {},
todos: [],
numberOfTodos: 0,
showModal: false
};
},
mounted: function() {
this.getTodos();
},
methods: {
saveTodo: function() {
if (this.mode == "create") {
apiService.createTodo(this.todo).then(
result => {
if (result.status === 200) {
this.todo = result.data;
this.getTodos();
}
},
error => {}
);
this.showModal = false;
// this.$refs.createtodo.$refs.todoModal
} else if (this.mode == "update") {
apiService.updateTodo(this.todo).then(
result => {
this.getTodos();
},
error => {}
);
this.showModal = false;
} else if (this.mode == "update") {
apiService.updateTodo(this.todo).then(
result => {
this.showModal = false;
this.getTodos();
},
error => {}
);
}
},
}
};
</script>
<style lang="scss">
</style>
从“/APIServices”导入{APIService}”;
const apiService=新的apiService();
导出默认值{
名称:“应用程序”,
数据:函数(){
返回{
模式:“创建”,
标题:“创建待办事项”,
todo:{},
待办事项:[],
ToDos编号:0,
showModal:错误
};
},
挂载:函数(){
这个。getTodos();
},
方法:{
saveTodo:function(){
如果(this.mode==“创建”){
apiService.createTodo(this.todo)。然后(
结果=>{
如果(result.status==200){
this.todo=result.data;
这个。getTodos();
}
},
错误=>{}
);
this.showModal=false;
//此。$refs.createtodo。$refs.todoModal
}else if(this.mode==“更新”){
apiService.updateTodo(this.todo)。然后(
结果=>{
这个。getTodos();
},
错误=>{}
);
this.showModal=false;
}else if(this.mode==“更新”){
apiService.updateTodo(this.todo)。然后(
结果=>{
this.showModal=false;
这个。getTodos();
},
错误=>{}
);
}
},
}
};
我尝试使用ref引用APP.js中的模式,但不起作用。您可以使用v-if来显示/隐藏模式 在您的组件中:
<div v-if="showModal">
<div id="todoModal" class="modal fade" role="dialog">
...
</div>
</div>
...
并将
showmodel
设置为true/false以分别显示/隐藏组件。如果使用boostrap,则需要从中调用hide-an-show方法,因为模态api会动态创建html元素(作为暗背景)
我建议创建一个save方法,而不是调用$emit,在这里可以在发出save信号之前调用modal hide方法
<script>
import $ from 'jquery'
export default {
name: "CreateTodo",
props: ["mode", "title", "todo"],
ref: "createTodoModal",
mounted() {
if (this.mode == "create") {
this.title = "Create Todo";
}
},
methods: {
save() {
$('#ModalId').modal('hide')
this.$emit('save')
}
}
};
</script>
从“jquery”导入$
导出默认值{
名称:“CreateTodo”,
道具:[“模式”、“标题”、“待办事项”],
参考:“createTodoModal”,
安装的(){
如果(this.mode==“创建”){
this.title=“创建待办事项”;
}
},
方法:{
保存(){
$('#ModalId').modal('hide'))
此。$emit('save')
}
}
};
在这种情况下不需要showModal。您可以使用此npm软件包
npm i vue-js-modal
然后应按以下方式修改代码:
<template>
<modal :name="'edit-modal'+id" height="auto">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit {{ mName }}</h5>
<button type="button" class="close" @click="hideEditModal(id)">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="/user/update" method="patch" @submit.prevent="updateAssistant">
<div class="modal-body">
<div class="position-relative form-group">
<label for="exampleAddress" class="">Full name</label><input name="name" v-model="editName" id="exampleAddress" placeholder="FullName" type="text" class="form-control">
<div v-if="errors.has('editName')" class="alert alert-danger">
{{ errors.first('editName') }}
</div>
</div>
<div class="position-relative form-group">
<label for="exampleEmail11" class="">Email</label><input name="email" v-model="editEmail" id="exampleEmail11" placeholder="email" type="email" class="form-control">
<div v-if="errors.has('editEmail')" class="alert alert-danger">
{{ errors.first('editEmail') }}
</div>
</div>
<div class="position-relative form-group">
<label for="examplePassword11" class="">Change Password</label><input name="password" v-model="editPassword" id="examplePassword11" placeholder="password" type="password" class="form-control">
<div v-if="errors.has('password')" class="alert alert-danger">
{{ errors.first('password') }}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @click="hideEditModal(id)">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
<span class="loader" v-if="this.loading" style="position: absolute; bottom: 0.515rem; left: 20px;">
<span class="ball-clip-rotate">
<div style=" border:1px solid #000;"></div>
</span>
</span>
</form>
</modal>
向“关闭X”按钮添加id“
像@Dan Stoian reply一样,您可以在vue.js中使用ref:
<button ref="Close" type="button" data-dismiss="modal" ...>
...
</button>
查看您的“showModal”属性“它不用于显示/隐藏某物。如果没有引导,v-show指令可能会有所帮助。它可以工作,但当模态隐藏时,模态的黑色背景不会消失。嗨,Ittus。。谢谢你的建议。我试过了,它确实有效,但是当模态隐藏时模态的背景不会消失,如果你使用引导,你需要用引导方法隐藏/显示。这可能会有帮助
<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close">
<span aria-hidden="true">×</span>
</button>
closeModal() {
document.getElementById('close').click();
},
<button ref="Close" type="button" data-dismiss="modal" ...>
...
</button>
this.$refs.Close.click();