How to handle V-show dynamically

I am trying to build an Ecommerce shopping website. I import data from JSON file and by using v-for loop I am able to print data. There is one section in each order that is Show Order Details option, after clicking it one more section called order details will show. I used v-show tag to open the details section. But when I am clicking one show order details option in every three orders show details part is opening, it’s not taking the ID properly in v-show. I tried with v-bind, but that doesn’t work. Please help me.

MyOrders.vue

<template>
  <div class="container">
    <div class="row">
      <div class="col-3">
        <h1 class="">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 v-bind:key="item.id" @click="active = !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="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,
      active: false,
    }
  },
  mounted(){
  },
  methods: {}
}
</script>
<style>
</style>

MyOrder.js

export const myOrders= [
    {
        "id": 1,
        "order_number": "11",
        "order_quantity": "10",
        "order_tracking_id": "1009",
        "order_details": "The order will ship to London",
    },
    {
        "id": 2,
        "order_number": "17",
        "order_quantity": "9",
        "order_tracking_id": "1055",
        "order_details": "The order will ship to Australia",
    },
    {
        "id": 3,
        "order_number": "15",
        "order_quantity": "13",
        "order_tracking_id": "1087",
        "order_details": "The order will ship to France",
    }
]

Answer

You can use item.id instead of boolean to toggle details :

const app = Vue.createApp({
  data() {
    return {
      myOrders: [{"id": 1, "order_number": "11", "order_quantity": "10",   "order_tracking_id": "1009", "order_details": "The order will ship to London",}, {"id": 2, "order_number": "17", "order_quantity": "9","order_tracking_id": "1055",       "order_details": "The order will ship to Australia",}, {"id": 3, "order_number": "15", "order_quantity": "13", "order_tracking_id": "1087", "order_details": "The order will ship to France",}],
      active: null,
    }
  },
  methods: {
    toggleDetails(id) {
      this.active = id === this.active ? null : id
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <div id="demo">
    <div class="container">
    <div class="row">
      <div class="col-3">
        <h1 class="">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 v-bind:key="item.id" @click="toggleDetails(item.id)">Show Order Details</button>
            </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>
</div>

Advertisement

Answer