I am currently in the process of developing an Ecommerce shopping platform. I have been importing data from a JSON file and successfully printing it using a v-for loop. One feature I am implementing is the Show Order Details option, where clicking on it reveals more detailed order information under the order details section by using the v-show tag. However, I have encountered an issue where, upon clicking the show order details option for every third order, the details section does not display properly as it fails to identify the ID for v-show. I attempted to resolve this using v-bind, but was unsuccessful. Any assistance would be greatly appreciated.
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",
}
]