One interesting feature of my coding project is that I have an array nested within another array, and I iterate through them using two v-for loops. The challenge arises when I try to display a specific div in the second loop only upon clicking a button. To better illustrate this issue, I have created a demonstration on jsFiddle: https://jsfiddle.net/h8L6zegc/1/
<template>
<div id="app">
<h1>My Orders</h1>
<div v-for="(orders, index) in SubmittedOrders" :key="index">
<h3>#2222</h3>
<h4>170$</h4>
<button @click="openModal(orders)">Order Details</button>
<hr>
<br>
<div v-show="Showmodal">
<div v-for="order in orders" :key="order.id">
<h3>{{ order.orderName }}</h3>
<h3>{{ order.price * order.quantity }}</h3>
</div>
<hr>
<h3>#2222</h3>
<h4>170$</h4>
<button @click="closeModal(orders)">Close Modal</button>
</div>
</div>
</div>
</template>
<script>
data() {
return {
SubmittedOrders: [
[{
orderName: 'Nissan',
price: 50,
quantity: 1,
},
{
orderName: 'Ferrari',
price: 120,
quantity: 2,
},
],
[{
orderName: 'Porsche',
price: 90,
quantity: 1,
},
{
orderName: 'Mercedes',
price: 180,
quantity: 4,
},
],
],
Showmodal: false,
};
},
methods: {
openModal(orders) {
console.log(orders);
this.Showmodal = true;
},
closeModal(orders) {
this.Showmodal = false;
}
}
</script>