Skip to content

fix(docs): improve <b-modal> prevent closing example (closes #2497) #3054

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 8, 2019
Merged

fix(docs): improve <b-modal> prevent closing example (closes #2497) #3054

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 41 additions & 21 deletions src/components/modal/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,26 +186,38 @@ called synchronously, as async is not supported.
```html
<template>
<div>
<b-button v-b-modal.modal-prevent>Launch demo modal</b-button>
<b-button v-b-modal.modal-prevent-closing>Open Modal</b-button>

<!-- Main UI -->
<div class="mt-3 mb-3">
<div class="mt-3">
Submitted Names:
<ul>
<li v-for="n in names">{{ n }}</li>
<div v-if="submittedNames.length === 0">--</div>
<ul v-else class="mb-0 pl-3">
<li v-for="name in submittedNames">{{ name }}</li>
</ul>
</div>

<!-- Modal Component -->
<b-modal
id="modal-prevent"
id="modal-prevent-closing"
ref="modal"
title="Submit your name"
title="Submit Your Name"
@show="resetModal"
@hidden="resetModal"
@ok="handleOk"
@shown="clearName"
>
<form @submit.stop.prevent="handleSubmit">
<b-form-input v-model="name" placeholder="Enter your name"></b-form-input>
<form ref="form" @submit.stop.prevent="handleSubmit">
<b-form-group
:state="nameState"
label="Name"
label-for="name-input"
invalid-feedback="Name is required"
>
<b-form-input
id="name-input"
v-model="name"
:state="nameState"
required
></b-form-input>
</b-form-group>
</form>
</b-modal>
</div>
Expand All @@ -216,27 +228,35 @@ called synchronously, as async is not supported.
data() {
return {
name: '',
names: []
nameState: null,
submittedNames: []
}
},
methods: {
clearName() {
checkFormValidity() {
const valid = this.$refs.form.checkValidity()
this.nameState = valid ? 'valid' : 'invalid'
return valid
},
resetModal() {
this.name = ''
this.nameState = null
},
handleOk(bvModalEvt) {
// Prevent modal from closing
bvModalEvt.preventDefault()
if (!this.name) {
alert('Please enter your name')
} else {
this.handleSubmit()
}
// Trigger submit handler
this.handleSubmit()
},
handleSubmit() {
this.names.push(this.name)
this.clearName()
// Exit when the form isn't valid
if (!this.checkFormValidity()) {
return
}
// Push the name to submitted names
this.submittedNames.push(this.name)
// Hide the modal manually
this.$nextTick(() => {
// Wrapped in $nextTick to ensure DOM is rendered before closing
this.$refs.modal.hide()
})
}
Expand Down