v-on：click是否仅显示特定对象的模态？

Question

当我使用下面的代码时，它将显示三个按钮，分别用于SAN，DAVID和JAY。如果我单击SAN或David或Jay，它将生成三次模态。有没有一种方法，当我单击SAN按钮时，它只在模式内部显示有customerName（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>

脚本功能

export default {
  name: 'App',
  components: {

  },

  data(){
    return{
      searchQuery: '',
      posts: [],
      subchildNoShow: []
    }
  }
}

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

}

Answer 1

您只能在模式上创建。将其移到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 **/

并在selectedPost上设置click并显示模态。

<div v-on:click="selectItem(post, item)"

并声明selectItem方法

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

Answer 2

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

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

基于modal instance show method，您将项目ID连接到modal instance show method词，例如，该词为您提供了作为方法参数的modal，然后通过modal1将其作为id提供给模态