Cacher is the code snippet organizer for pro developers

// listen in parent
  
  this.$on('dismiss', (dismiss) => {
    console.log(dismiss)
    if(dismiss === 'confirmRackUpdateModal') this.confirmRackUpdateModal = false

  })

  this.$on('confirm', (confirm) => {
    if(confirm === 'complete()') this.complete()
  })
      
// in html

<modalComponent
  v-bind:open="confirmRackUpdateModal"
  name="confirmRackUpdateModal"
  title='Update Rack'
  text='Changes will be written to the database'
  confirmFunction="complete()">
</modalComponent>
      
// component
      
      <template>
  <div class="modal" v-bind:class="{'is-active': open}">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">{{title}}</p>
        <button class="delete" aria-label="close"></button>
      </header>
      <section class="modal-card-body">
        <p>{{text}}</p>
      </section>
      <footer class="modal-card-foot">
        <button v-on:click="dismiss()" class="button is-large">Cancel</button>
        <button v-on:click="confirm()" class="button is-danger is-large is-pulled-right">Save changes</button>
      </footer>
    </div>
  </div>
</template>

<script>

export default {
  name: 'modalComponent',
  props: ['open', 'name', 'title', 'text', 'confirmFunction'],
  data: function () {
    return {
    }
  },
  created: function () { },
  methods: { dismiss, confirm }
}

function dismiss(event) {
  this.$parent.$emit('dismiss', this.name)
}

function confirm(event) {
  this.$parent.$emit('confirm', this.confirmFunction)
  this.dismiss()
}

</script>

<style scoped>

.modal{
  text-align:left;
  color:black;
}

</style>