Vue中v-show动态控制遇问题：点击按钮所有订单详情展开求助

问题原因 #

你当前用了单个全局的active布尔值控制所有订单的详情显示状态，所有订单的v-show都绑定这个变量，点击任意按钮切换active时，所有订单的详情区域都会同步变化。

解决方案1：用对象存储每个订单的激活状态 #

通过对象记录每个订单ID对应的激活状态，实现单独控制：

修改后的MyOrders.vue代码：

<template>
  <div class="container">
    <div class="row">
      <div class="col-3">
        <h1>MyOrders</h1>
      </div>
      <div class="form-class">
        <div class="col-md-12" v-for="item in Myorders" :key="item.id">
          <div class="row">
            <div class="col-6">
              {{ item.order_quantity }}
            </div>
            <div class="col-6">
              <button @click="active[item.id] = !active[item.id]">Show Order Details</button>
            </div>
          </div>
          <div class="row">
            <div class="col-6">
              <span class="text-dark">{{ item.order_number }}</span>
            </div>
          </div>
          <div class="row">
            <div class="col-6">
              <span class="text-dark">{{ item.order_tracking_id }}</span>
            </div>
          </div>
          <div class="row">
            <div class="col-6">Order details
              <span class="text-dark" v-show="active[item.id]">{{ item.order_details }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { myOrders } from "./MyOrders";
export default {
  name: "Myorders",
  data() {
    return {
      Myorders: myOrders,
      active: {}, // 改为对象存储每个订单的激活状态
    };
  },
};
</script>
<style>
</style>

解决方案2：给每个订单对象添加active属性 #

直接在订单数据中添加状态属性，控制单个订单的显示：

修改后的MyOrders.vue代码：

<template>
  <div class="container">
    <div class="row">
      <div class="col-3">
        <h1>MyOrders</h1>
      </div>
      <div class="form-class">
        <div class="col-md-12" v-for="item in Myorders" :key="item.id">
          <div class="row">
            <div class="col-6">
              {{ item.order_quantity }}
            </div>
            <div class="col-6">
              <button @click="item.active = !item.active">Show Order Details</button>
            </div>
          </div>
          <div class="row">
            <div class="col-6">
              <span class="text-dark">{{ item.order_number }}</span>
            </div>
          </div>
          <div class="row">
            <div class="col-6">
              <span class="text-dark">{{ item.order_tracking_id }}</span>
            </div>
          </div>
          <div class="row">
            <div class="col-6">Order details
              <span class="text-dark" v-show="item.active">{{ item.order_details }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { myOrders } from "./MyOrders";
export default {
  name: "Myorders",
  data() {
    return {
      Myorders: myOrders,
    };
  },
  mounted() {
    // 给每个订单添加active属性，初始为false
    this.Myorders.forEach(order => {
      order.active = false;
    });
  },
};
</script>
<style>
</style>

内容的提问来源于stack exchange，提问作者user18286913