Javascript 是否有一种方法可以使v-on:click仅显示特定对象的模态？

当我使用下面的代码时，它会为SAN、DAVID和JAY显示三个按钮。如果我点击SAN、David或Jay，它会生成三次模态。是否有一种方法，当我单击按钮SAN时，它只显示一次模式，而客户名称（SAN）在模式中

我的模板文件

<div id="app">
<div v-for="post in posts" v-bind:key="post.createdAt">
  <div>
    <b-col md="3">
      <div v-for="item in post.items" v-bind:key="item.id">
      <div v-on:click="item.id = !item.id" style="color: blue;">
         <b-button v-b-modal.modal-xl variant="info">{{post.customerName}}</b-button>

            /** the code display the modal from BOOTSTRAP VUE **/

             <b-modal id="modal-xl" centered size="xl" title="TEAM NAME 1">
                <p> Booker Name = <u style="font-weight:bold;">{{post.customerName}}</u> </p>
                  <b-container class="bv-example-row">
                     <b-row style="font-weight:bold;">
                     <b-col><p>Child Name</p></b-col>
                     <b-col><p>Text Number</p></b-col>
                     <b-col><p>No Show</p></b-col>
                    </b-row>
                    <b-row>
                      <b-col><p>David</p></b-col>
                      <b-col><p>P</p></b-col>
                      <b-col><p>817 360 2705</p></b-col>
                      <b-col><input type="checkbox" v-model="subchildNoShow"/></b-col>
                    </b-row>
                </b-container>
             </b-modal>

             /** END OF MODAL **/

          </div>
       </div>
     </b-col>
    </div>
 </div>
</div>

JSON文件值

data{
 Object[0]{
    customerName:'San',
    createdAt: '2020-04-15',
    items:{
       id:'1',
       arrivalTime:'06:00 PM'
    }
  }

  Object[1]{
    customerName:'David',
    createdAt: '2020-04-15',
    items:{
       id:'2',
       arrivalTime:'07:00 PM'
    }
  }

 Object[2]{
    customerName:'Jay',
    createdAt: '2020-04-15',
    items:{
       id:'3',
       arrivalTime:'07:00 PM'
    }
  }

}

---

尝试使每个项目的模态组件唯一，如下所示：

  <b-button @click="$bvModal.show('modal'+item.id)" variant="info">{{post.customerName}}</b-button>
               <!--    v----------------------^ -->
 <b-modal :id="'modal'+item.id" centered size="xl" title="TEAM NAME 1">

{{post.customerName}

---

基于此，您将项目id连接到

modal

单词，该单词为您提供了方法参数，例如

modal1

，然后通过

：id=“'modal'+item.id”

将其作为

id提供给模态，您应该只在modal上创建。将其移出
v-for

            /** the code display the modal from BOOTSTRAP VUE **/

             <b-modal id="modal-xl" centered size="xl" title="TEAM NAME 1">
                <p> Booker Name = <u style="font-weight:bold;">{{selectedCustomerName}}</u> </p>
                  <b-container class="bv-example-row">
                     <b-row style="font-weight:bold;">
                     <b-col><p>Child Name</p></b-col>
                     <b-col><p>Text Number</p></b-col>
                     <b-col><p>No Show</p></b-col>
                    </b-row>
                    <b-row>
                      <b-col><p>David</p></b-col>
                      <b-col><p>P</p></b-col>
                      <b-col><p>817 360 2705</p></b-col>
                      <b-col><input type="checkbox" v-model="subchildNoShow"/></b-col>
                    </b-row>
                </b-container>
             </b-modal>

             /** END OF MODAL **/

并声明
selectItem
方法

methods: {
 selectItem (post, item) {
  item.id = !item.id
  this.selectedCustomerName = post.customerName
  // show the modal
  $bvModal.show('modal-xl')
 }
}

当我使用console.log（this.selectedCustomerName）时，它给了我单击的值。仍然显示三个模态ID您是否将模态移到两个v-FOR之外？您应该在v-for=“post in posts”之前创建它。我刚刚在v-for=“post in posts”之前复制了模式代码。
<div v-on:click="selectItem(post, item)"

methods: {
 selectItem (post, item) {
  item.id = !item.id
  this.selectedCustomerName = post.customerName
  // show the modal
  $bvModal.show('modal-xl')
 }
}