如何在 vuejs 的 v-for 循环中显示子 div

Question

我有一个嵌套在数组内部的数组，我使用两个 v-for 循环遍历它们。 当我单击一个按钮时，我希望它仅在第二个循环中显示 div（我单击按钮的 div）。 我有点难以用文字解释它，所以我将它上传到 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

您可以在data部分添加一个变量来存储打开的orders并使用它来构建v-show的条件。 像这样的东西：

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

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