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
JavaScript
x
55
55
1
<template>
2
<div class="container">
3
<div class="row">
4
<div class="col-3">
5
<h1 class="">MyOrders</h1>
6
</div>
7
<div class="form-class">
8
<div class="col-md-12" v-for="item in MyOrders"
9
:key="item.id">
10
<div class="row">
11
<div class="col-6">
12
{{ item.order_quantity }}
13
</div>
14
<div class="col-6">
15
<button v-bind:key="item.id" @click="active = !active">Show Order Details</button>
16
</div>
17
</div>
18
<div class="row">
19
<div class="col-6">
20
<span class="text-dark">{{ item.order_number }}</span>
21
</div>
22
</div>
23
<div class="row">
24
<div class="col-6">
25
<span class="text-dark">{{ item.order_tracking_id }}</span>
26
</div>
27
</div>
28
<div class="row">
29
<div class="col-6">Order details
30
<span class="text-dark" v-show="active">{{ item.order_details }}</span>
31
</div>
32
</div>
33
</div>
34
</div>
35
</div>
36
</div>
37
</template>
38
<script>
39
import {myOrders} from "./MyOrders";
40
export default {
41
name: "Myorders",
42
data() {
43
return {
44
Myorders: myOrders,
45
active: false,
46
}
47
},
48
mounted(){
49
},
50
methods: {}
51
}
52
</script>
53
<style>
54
</style>
55
MyOrder.js
JavaScript
1
24
24
1
export const myOrders= [
2
{
3
"id": 1,
4
"order_number": "11",
5
"order_quantity": "10",
6
"order_tracking_id": "1009",
7
"order_details": "The order will ship to London",
8
},
9
{
10
"id": 2,
11
"order_number": "17",
12
"order_quantity": "9",
13
"order_tracking_id": "1055",
14
"order_details": "The order will ship to Australia",
15
},
16
{
17
"id": 3,
18
"order_number": "15",
19
"order_quantity": "13",
20
"order_tracking_id": "1087",
21
"order_details": "The order will ship to France",
22
}
23
]
24
Advertisement
Answer
You can use item.id
instead of boolean to toggle details :
JavaScript
1
14
14
1
const app = Vue.createApp({
2
data() {
3
return {
4
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",}],
5
active: null,
6
}
7
},
8
methods: {
9
toggleDetails(id) {
10
this.active = id === this.active ? null : id
11
}
12
}
13
})
14
app.mount('#demo')
JavaScript
1
27
27
1
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
2
<div id="demo">
3
<div class="container">
4
<div class="row">
5
<div class="col-3">
6
<h1 class="">MyOrders</h1>
7
</div>
8
<div class="form-class">
9
<div class="col-md-12" v-for="item in myOrders" :key="item.id">
10
<div class="row">
11
<div class="col-6">
12
{{ item.order_quantity }}
13
</div>
14
<div class="col-6">
15
<button v-bind:key="item.id" @click="toggleDetails(item.id)">Show Order Details</button>
16
</div>
17
</div>
18
<div class="row">
19
<div class="col-6">Order details
20
<span class="text-dark" v-show="active === item.id">{{ item.order_details }}</span>
21
</div>
22
</div>
23
</div>
24
</div>
25
</div>
26
</div>
27
</div>