I need some assistance with creating a bootstrap modal window that provides a warning to the user before they take an action. The issue I am facing is that when I enter text into a field, close the modal, and then reopen it, the previous values are still there. How can I make the text field mandatory so that it clears when the modal is closed but retains the value in "reason"? Any guidance on this would be greatly appreciated!
Below is the code snippet using vuejs:
<div class="modal fade" id="reject" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Loan Rejection</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to reject this loan request?</p>
<div class="form-group">
<label>Reason: </label>
<input v-model="reason" class="form-control" placeholder="Enter your reason">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" v-show="reason" @click="clearbox">Reject</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {
loanRequest: '',
reason: ''
}
},
methods: {
clearbox (){
reason: ''
}
},
created () {
this.$http.get('http://localhost:9000/api/loans/hrvalidation')
.then(
response => {
this.loanRequest = response.body
})
.catch(function(error){
console.log(error)
})
}
}
</script>