I was a bit tired of looking for a suitable example of using a Bootstrap 4.0 modal within Vue.js.
Here is a Vue component to do just that. I've included an example of how to use. After the initial comments of the Example, everything else is your JavaScript component file.
Here is a Vue component to do just that. I've included an example of how to use. After the initial comments of the Example, everything else is your JavaScript component file.
I welcome comments if folks have improvements...but let's keep it simple for everyone else.
// jQuery required as Bootstrap uses it, but if you use another non-jQuery
// modal framework, you can modify the show() function to remove jQuery modal 'show'
//
// Example:
//
// <div id="app">
// <button type="button" class="btn btn-secondary" v-on:click="$refs.modal.show()">Modal</button>
// <confirm-component ref="modal" v-bind:options="confirmOptions()" v-on:closeCancel="cancel" v-on:closeNo="no" v-on:closeYes="yes"></confirm-component>
// </div>
//
// <script>
// var vueApp = new Vue({
// el: '#app',
// ...
//
// confirmOptions() {
// return {
// title: '<i>Do you really want to do this?</i>',
// message: 'Going to do something really <strong>major</strong>...continue?',
//
// textCancel: 'CANCEL', // defaults to 'Cancel'
// textNo: 'NO', // defaults to 'No'
// textYes: 'YES', // defaults to 'Yes'
//
// showNo: true, // defaults to true
// showNo: false, // defaults to false
// showYes: true // defaults to true
// };
// }
// cancel() {
// alert('cancel');
// },
// no() {
// alert('no');
// },
// yes() {
// alert('yes');
// }
// });
// </script>
"use strict";
Vue.component('confirm-component', {
props: ['options'],
methods: {
show() {
$('#confirmModalComponent').modal('show');
}
},
computed: {
modalTitle() {
return this.options.title ? this.options.title : '';
},
modalMessage() {
return this.options.message ? this.options.message : '';
},
modalTextCancel() {
return this.options.textCancel ? this.options.textCancel : 'Cancel';
},
modalTextNo() {
return this.options.textNo ? this.options.textNo : 'No';
},
modalTextYes() {
return this.options.textYes ? this.options.textYes : 'Yes';
},
showCancel() {
return this.options.showCancel ? this.options.showCancel : true;
},
showNo() {
return this.options.showNo ? this.options.showNo : false;
},
showYes() {
return this.options.showYes ? this.options.showYes : true;
},
closeCancel() {
this.$emit('closeCancel');
},
closeNo() {
this.$emit('closeNo');
},
closeYes() {
this.$emit('closeYes');
}
},
template: `
<div class="modal fade" id="confirmModalComponent" tabindex="-1" role="dialog" aria-labelledby="confirmModalComponentLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmModalComponentLabel" v-html="modalTitle"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" v-html="modalMessage">
</div>
<div class="modal-footer justify-content-between">
<div>
<button v-if="showCancel" type="button" class="btn btn-primary" :click="closeCancel" data-dismiss="modal">{{modalTextCancel}}</button>
</div>
<div>
<button v-if="showNo" type="button" class="btn btn-primary" :click="closeNo" data-dismiss="modal">{{modalTextNo}}</button>
<button v-if="showYes" type="button" class="btn btn-success" :click="closeYes" data-dismiss="modal">{{modalTextYes}}</button>
</div>
</div>
</div>
</div>
</div>
`
});
