Vue.js在同一頁面上兩次使用模式組件

Question

我已經制作了自己的模態組件，並且在de app頁面上我想顯示2個按鈕，但是它們使用第一個模態。 我如何才能實現彈出具有不同內容的2個模態？

我該如何實現？

應用程序

<modal-decision v-on:decision="handleDirectImport" modalButtonText="title 1" modalTitle="Title 1" modalBody="Content 1" ></modal-decision>
<modal-decision v-on:decision="handleDirectImport" modalButtonText="title 2" modalTitle="Title 2" modalBody="Content 2" ></modal-decision>

模型

<template>
    <div>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            {{ modalButtonText}}
        </button>

        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">{{ modalTitle }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {{ modalBody}}
                    </div>
                    <div class="modal-footer">

                        <button type="button" class="btn btn-success" @click="clickYes('yes')">ja</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">nee</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            modalTitle: String ,
            modalBody: String,
            modalButtonText: String,
        },
        methods: {
            clickYes(decision) {
                $('#exampleModal').modal('hide');
                this.$emit('decision', decision)
            }
        }
    }
</script>

可能的解決方案：

<modal-decision v-if="uploadstatus" modalId="example1"....
<modal-decision v-if="uploadstatus" modalId="example2"....

<button type="button" class="btn btn-primary" data-toggle="modal" :data-target="'#'+modalId">
    {{ modalButtonText}}
</button>

<div class="modal fade" :id="modalId" tabindex="-1"....

Answer 1

您可以使用refs和以編程方式觸發模態。

在每個組件上添加一個引用，並添加一個新的prop（例如modal-ref ）以在組件內部檢索引用名稱：

<modal-decision v-on:decision="handleDirectImport" modal-button-text="title 1" modal-title="Title 1" modal-body="Content 1" modal-ref="modal1" ref="modal1"></modal-decision>
<modal-decision v-on:decision="handleDirectImport" modal-button-text="title 2" modal-title="Title 2" modal-body="Content 2" modal-ref="modal2"  ref="modal2" ></modal-decision>

[提示]：請注意，HTML屬性不區分大小寫，並且使用in-DOM模板時，camelCased道具需​​要使用其kebab-case等效項。 您可能應該使用“ modal-button-text”而不是“ modalButtonText”。 （與其他道具相同）

在您的組件中，在modal元素上添加一個新的ref ，並使用一種方法觸發它：

<template>
  <div>
    <button type="button" class="btn btn-primary" @click="showModal()">
      {{ modalButtonText}}
    </button>

    <div class="modal fade" ref="exampleModal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
       <!-- Modal content here -->
    </div>
  </div>
</template>

props: {
  modalTitle: String,
  modalBody: String,
  modalButtonText: String,
  modalRef: String
},
methods: {
  showModal() {
    let element = this.$parent.$refs[this.modalRef].$refs.exampleModal
    $(element).modal('show')
  }
}

小提琴的例子在這里

Answer 2

首先，在Vue中使用JQuery lib不是一個好主意。 這會使您的生活變得復雜。

您可以將一個prop = modalButtons定義為一個數組，然后父級可以將按鈕規范傳遞給Modal組件，例如[{'type':'close','text':'Close', 'action':function () {modal2 = false} }, {'type':'other','text':'Check', 'action':function () {/*check something*/} }]

然后，v-modal將生成類似於以下演示的按鈕：

 Vue.config.productionTip = false Vue.component('v-modal', { template: ` <!-- Modal --> <div class="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" :class="value?'show':'fade'"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">{{ modalTitle }}</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="computedCloseButton.action($event)"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> {{ modalBody}} </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" v-for="(modalButton, index) in modalButtons" :key="index" @click="modalButton.action($event)"> {{ modalButton.text}} </button> </div> </div> </div> </div>`, props: { modalTitle: { type: String, default: '' }, modalBody: { type: String, default: '' }, value: { type: Boolean, default: false }, modalButtons: { type: Array, default: () => [{'type':'close', 'text':'Close', 'action': function () {}}] } }, computed: { computedCloseButton: function () { return this.modalButtons.find((item) => { return item.type === 'close' }) } } }) app = new Vue({ el: "#app", data: { modal1: false, modal2: false }, methods: { openModals: function () { this.modal1 = true this.modal2 = true }, checkSomething: function () { console.log('check something') } } }) 

 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script> <div id="app"> <button @click="openModals()">Open Both Modals</button> <v-modal modal-title="Test1" modal-body="I am test1" :modal-buttons="[{'type':'close','text':'Close', 'action':function () {modal1 = false} }]" v-model="modal1"></v-modal> <v-modal modal-title="Test2" modal-body="I am test2" :modal-buttons="[ {'type':'other','text':'Check', 'action':checkSomething}, {'type':'close','text':'Close', 'action':function () {modal2 = false}}]" v-model="modal2"></v-modal> </div>