VueJs：如何重用引导程序模式对话框

Question

I've created three simple buttons that will trigger three different bootstrap modal dialog. The modal dialogs are "Add Product" , "Edit Product" and "Delete Product" . Both the Add and Edit modal dialogs contain a form with two input elements, whereas the Delete modal dialog contains a simple text. I realise that my code becomes very messy and hard to maintain. Hence, I have the following question:

1) How do I reuse the modal dialog, instead of creating 3 separate dialogs?

2) How do I know which modal dialog has been triggered?

Update : I've developed a soultion where I will include conditional statements such as v-if, v-else-if and v-else to keep track of which button the user click. However, I still feel that there is a better solution to this. Can anyone help/advice me?

Below is my current code:

       <template>
  <div>
    <b-button v-b-modal.product class="px-4" variant="primary" @click="addCalled()">Add</b-button>
    <b-button v-b-modal.product class="px-4" variant="primary" @click="editCalled()">Edit</b-button>
    <b-button v-b-modal.product class="px-4" variant="primary" @click="deleteCalled()">Delete</b-button>

    <!-- Modal Dialog for Add Product -->
    <b-modal id="product" title="Add Product">
      <div v-if="addDialog">
        <form @submit.stop.prevent="submitAdd">
          <b-form-group id="nameValue" label-cols-sm="3" label="Name" label-for="input-horizontal">
            <b-form-input id="nameValue"></b-form-input>
          </b-form-group>
        </form>

        <b-form-group id="quantity" label-cols-sm="3" label="Quantity" label-for="input-horizontal">
          <b-form-input id="quantity"></b-form-input>
        </b-form-group>
      </div>

      <div v-else-if="editDialog">
        <form @submit.stop.prevent="submitEdit">
          <b-form-group id="nameValue" label-cols-sm="3" label="Name" label-for="input-horizontal">
            <b-form-input id="nameValue" :value="productName"></b-form-input>
          </b-form-group>
        </form>

        <b-form-group id="quantity" label-cols-sm="3" label="Quantity" label-for="input-horizontal">
          <b-form-input id="quantity" :value="productQuantity">5</b-form-input>
        </b-form-group>
      </div>

      <div v-else>
        <p class="my-4">Are You Sure you want to delete product?</p>
      </div>
    </b-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productName: "T-Shirt",
      productQuantity: 10,
      addDialog: false,
      editDialog: false,
      deleteDialog: false
    };
  },
  methods: {
    addCalled() {
      this.addDialog = true;
    },
    editCalled() {
      this.editDialog = true;
      this.addDialog = false;
      this.deleteDialog = false;
    },
    deleteCalled() {
      this.deleteDialog = true;
      this.addDialog = false;
      this.editDialog = false;
    }
  }
};
</script>

<style>
</style>

Answer 1

Update

Now, You might think how will you close your modal and let the parent component know about it. On click of button trigger closeModal for that

Create a method - closeModal and inside commonModal component and emit an event.

closeModal() { 
  this.$emit('close-modal')
}

Now this will emit a custom event which can be listen by the consuming component.

So in you parent component just use this custom event like following and close your modal

<main class="foo">
  <commonModal v-show="isVisible" :data="data" @close- modal="isVisible = false"/>
  <!-- Your further code -->
</main>

So as per your question

A - How do I reuse the modal dialog, instead of creating 3 separate dialogs

Make a separate modal component, let say - commonModal.vue .

Now in your commonModal.vue , accept single prop , let say data: {} .

Now in the html section of commonModal

<div class="modal">
  <!-- Use your received data here which get received from parent -->
  <your modal code />
</div>

Now import the commonModal to the consuming/parent component. Create data property in the parent component, let say - isVisible: false and a computed property for the data you want to show in modal let say modalContent .

Now use it like this

<main class="foo">
   <commonModal v-show="isVisible" :data="data" />
   <!-- Your further code -->
</main>

The above will help you re-use modal and you just need to send the data from parent component.

Now second question will also get solved here How do I know which modal dialog has been triggered?

Just verify isVisible property to check if modal is open or not. If isVisible = false then your modal is not visible and vice-versa

Answer 2

As already mentionned, I would have use slots and dynamic component rendering to accomplish what you're trying to do in a cleaner way.

See snippet below (I didn't make them modals as such but the idea is the same).

This way, you can have a generic modal component that deals with the shared logic or styles and as many modalContent sub-components as needed that are injected via the dedicated slot.

 Vue.component('modal', { template: ` <div> <h1>Shared elements between modals go here</h1> <slot name="content"/> </div> ` }); Vue.component('modalA', { template: ` <div> <h1>I am modal A</h1> </div> ` }); Vue.component('modalB', { template: ` <div> <h1>I am modal B</h1> </div> ` }); Vue.component('modalC', { template: ` <div> <h1>I am modal C</h1> </div> ` }); new Vue({ el: "#app", data: { modals: ['modalA', 'modalB', 'modalC'], activeModal: null, }, }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button v-for="modal in modals" @click="activeModal = modal"> Open {{ modal }} </button> <modal> <template slot="content"> <component :is="activeModal"></component> </template> </modal> </div>