Modals- Bootstrap-Vue

https://bootstrap-vue.github.io/docs/components/modals

by Ironim Morar

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
  <b-btn @click="$root.$emit('show::modal','modal1')">Launch demo modal</b-btn>

  <!-- Main UI -->
  <div class="mt-3 mb-3">
    Submitted Names:
    <ul>
      <li v-for="n in names">{{n}}</li>
    </ul>
  </div>

  <!-- Modal Component -->
  <b-modal id="modal1" title="Submit your name" @ok="submit" @shown="clearName">

    <form @submit.stop.prevent="submit">
      <b-form-input type="text" placeholder="Enter your name" v-model="name"></b-form-input>
    </form>

  </b-modal>

</div>

CSS

#app {
  padding: 20px;
  height: 300px;
}

JavaScript

window.app = new Vue({
  el: '#app',
  data: {
    name: '',
    names: []
  },
  methods: {
    clearName() {
        this.name = '';
      },
      submit() {
        if (!this.name) {
          /* eslint-disable no-alert */
          alert('Please enter your name');
          return false;
        }
        this.names.push(this.name);
        this.name = '';

        // Ensure modal closes
        this.$root.$emit('hide::modal', 'modal1');
      }
  }
});