How can I modify the code below to ensure that when I click on the SAN button, the modal only displays once with the customerName (SAN) inside it? Currently, clicking on SAN, DAVID, or JAY generates the modal three times.
This is my template file:
<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>
/** Modal Display Code 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>
Script Function:
export default {
name: 'App',
components: {
},
data(){
return{
searchQuery: '',
posts: [],
subchildNoShow: []
}
}
}
JSON File values:
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'
}
}
}