Vue-创建具有ID的多个模态窗口

Question

在我的页面中，我正在创建一种功能，当单击相关按钮时，将显示多个模式窗口。我想将模态映射到其他按钮，以便打开正确的模态。通常，您会使用id：例如href="#my-modal"。

在CMS中，可以为不同的模式窗口创建内容，因此计划是遍历它们并分配可在按钮中使用的ID。我可以使用它，但是如何在下面修改我的代码以使用特定的ID而不是通用的Modal窗口？

这是我的Vue脚本

    // register modal component
        Vue.component('modal', {
          template: '#modal-template'
        })

    new Vue({
        el: '#app',
        data: {
            showModal: false
        }
    });

这是模式的自定义内容：

    <button v-on:click="showModal = true">Show Modal</button>

    {#  use the modal component, pass in the prop #}
    <modal v-if="showModal" @close="showModal = false">

    {# You can use custom content here to overwrite default content #}
      <h3 slot="header" class="">Custom Header</h3>
      <div slot="body">
         Lorem ipsum dolor sit amet.
      </div>
      <span slot="footer">Text goes here</span>
    </modal>