有没有办法让 v-on:click 仅显示特定对象的模式？答案

【问题标题】：Is there a way that v-on:click displays modal for particular objects only?有没有办法让 v-on:click 仅显示特定对象的模式？
【发布时间】：2020-04-15 21:54:57
【问题描述】：

当我使用下面的代码时，它会显示 SAN、DAVID 和 JAY 的三个按钮。如果我单击 SAN 或 David 或 Jay，它会生成 3 次模态。有没有一种方法，当我点击按钮 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'
    }
  }

}

【问题讨论】：

标签： javascript twitter-bootstrap vue.js vuejs2 bootstrap-vue

【解决方案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 **/

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

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

【讨论】：

当我使用 console.log(this.selectedCustomerName) 它给了我点击的值。仍然显示三个模态
您是否将模态移到两个 v-fors 之外？你应该在 v-for="post in posts" 之前创建它
我只是在 v-for="post in posts" 起作用之前复制了模态代码。

【解决方案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字，例如modal1是方法参数，然后通过:id="'modal'+item.id"将其作为id提供给模态/p>

【讨论】：