How can I display a child div inside a v-for loop in vuejs

Question

I have an array nested inside of an array and I loop through them using two v-for loops. When I click on a button I want it to display the div in the second loop only (the div for which I clicked my button). I'm kinda having trouble explaining it with words so I uploaded it to 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: 'porch',
            price: 90,
            quantity: 1,
          },
          {
            orderName: 'Mercedez',
            price: 180,
            quantity: 4,
          },
        ],
      ],
      Showmodal: false,
    };
  },
  methods: {
    openModal(orders) {
      console.log(orders);
      this.Showmodal = true;
    },
    closeModal(orders) {
      this.Showmodal = false;
    }
  }

</script>

Answer 1

You can add a variable in data section to store opened orders and use it to build a condition for v-show. Something like this:

<div v-show="orders===activeOrders">

 data() {
    return {
      activeOrders: null
  ...
 methods: {
    openModal(orders) {
      console.log(orders);
      this.activeOrders = orders;
    },
    closeModal(orders) {
      this.activeOrders = null;  
    }
  }