[Vuejs]-How to communicate with modal in bootstrap vue

by

2👍

✅

b-modal emits a generic hide event, which receives as its first argument the trigger that closed the modal (i.e. ok, cancel, esc, backdrop, etc):

<template>
  <b-modal
    v-if="itemCopy"
    v-model="shown"
    @hide="handleHide"
  >
  <!-- content -->
  </b-modal>
</template>

<script>
export default {
  // ...
  methods: {
    // ...
    handleHide(bvEvt) {
      if (bvEvt.trigger === 'ok') {
        // User clicked OK button
        this.$emit('input', this.itemCopy)
      } else {
        // The modal was closed not via the `ok` button
        this.$emit('input', null)
      }
    }
  }
};
</script>
👤Troy Morehouse

1👍

<template>
  <b-modal
    :id="id"
    @ok="$emit('ok', item)"
  >
  <!-- content -->
  </b-modal>
</template>

<script>
export default {
  props: {
    item: Object,
    id: String
  }
};
</script>

<template>
  <!-- omitted for brevity -->
  <ItemModal :item="modalItem" :id="modalId" @ok="onModalOk" />
<template>
<script>
//...
export default {
  data() {
    return {
      modalId:  "myItemModal"
      itemNumber: null
      modalItem: null
    };
  },
  methods: {
    showItemModal(itemNumber) {
      this.itemNumber = itemNumber
      this.modalItem = _.cloneDeep(this.entries[itemNumber])
      this.$bvModal.show(this.modalId)
    },
    onModalOk(newItem) {
      if (newItem && this.itemNumber) {
        //splice, etc.
      }
    }
  }
//...
<script>
👤Michal Levý

Leave a comment