Javascript VUEJ在同一页面上使用模态组件两次

我制作了自己的模式组件，在de app页面上我想显示2个按钮，但它们使用第一个模式。我怎样才能弹出两个不同内容的模态呢

我怎样才能做到这一点

App.vue

<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>

Model.vue

<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>

{{modalbuttonext}}
{{modalTitle}}
&时代；
{{modalBody}}
青年成就组织
原姓的
导出默认值{
道具：{
模态：弦，
modalBody:String，
modalButtonText:字符串，
},
方法：{
单击是（决定）{
$（'exampleModal'）.modal（'hide'）；
此.$emit（'decision'，decision）
}
}
}

可能的解决办法：

<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"....

---

您可以使用
refs
并以编程方式触发模态

在每个组件上添加一个ref和一个新的prop（
modal ref
），以检索组件内的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>

道具：{
模态：弦，
modalBody:String，
modalButtonText:字符串，
modalRef:String
},
方法：{
showModal（）{
let element=this.$parent.$refs[this.modalRef]。$refs.examplemodel
$（元素）.modal（'show'）
}
}

首先，在Vue中使用JQuery库不是一个好主意。这会让你的生活变得复杂

您可以将一个prop=modalButtons定义为一个数组，然后父级可以将按钮规范传递给模式组件，如
[{'type'：'close'，'text'：'close'，'action'：function（）{modal2=false}，{'type'：'other'，'text'：'Check'，'action'：function（）{/*Check something*/}]

然后，v-modal将生成如下演示所示的按钮：


Vue.config.productionTip=false
Vue.组件（“v-模态”{
模板：`
{{modalTitle}}
&时代；
{{modalBody}}
{{modalButton.text}
`,
道具：{
模式：{
类型：字符串，
默认值：“”
},
模态体：{
类型：字符串，
默认值：“”
},
价值：{
类型：布尔型，
默认值：false
},
模态按钮：{
类型：数组，
默认值：（）=>[{'type'：'close'，'text'：'close'，'action'：函数（）{}]
}
},
计算：{
computedCloseButton:函数（）{
返回此.modalButtons.find（（项目）=>{
return item.type===“关闭”
})
}
}
})
app=新Vue({
el:“应用程序”，
数据：{
模式一：错，
模态2：假
},
方法：{
OpenModels:函数（）{
this.modal1=true
this.modal2=true
},
checkSomething:function（）{
log（'check something'）
}
}
})

打开两个情态动词
如何显示模态？对于与可见状态相关的每个模态，它应该是2个变量，或者另一种方式，它应该是模态组件中的方法
show
，您应该
ref
在父级中引用您的模态，并在您想要的模态上调用
show
。我有一个解决方案，请参见编辑，这也很好吗？你的解决方案也不错！
<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>