I have two component. I set and get data by vuex store
My first component like this :
<template>
<ul class="list-group">
<li v-for="item in getOrderList" class="list-group-item">
....
<a href="javascript:"
class="toggle-show"
aria-expanded="false"
data-toggle="collapse"
:data-target="'#' + item.id"
@click="showDetailOrder(item.id)">
Show <span class="caret"></span>
</a>
...
<div class="collapse" :id="item.id">
<template v-if="getOrderDetail.id">
<order-collapse/>
</template>
</div>
</li>
</ul>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import OrderCollapse from './OrderCollapse.vue'
export default {
name: 'order-list',
components: {OrderCollapse},
created() {
// this is ajax to get order list. process ajax in the vuex store. this return data orders
this.setOrderList()
}
methods: {
...mapActions(['setOrderList']),
showDetailOrder(id) {
// this is ajax to get order detail by id. process ajax in the vuex store. this return detail order by id
this.setOrderDetail(id)
}
},
computed: {
...mapGetters(['getOrderList'])
},
}
</script>
My second component like this :
<template>
<table class="table table-bordered table-collapse">
<tbody>
<tr>
<td>
<span class="title">Address<br></span>
<span class="title">{{getOrderDetail.buyer.name}}</span>
<p>
{{getOrderDetail.buyer.address}}<br>
{{getOrderDetail.buyer.mobile_number}}<br>
</p>
</td>
</tr>
...
</tbody>
</table>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
name: 'order-collapse',
computed: {
...mapGetters(['getOrderDetail'])
},
}
</script>
Note :
setOrderList(): this will call ajax and save the response(orders data list) on : getOrderList
setOrderDetail(): this will call ajax and save the response(order data by id) on : getOrderDetail
Every time you click the button show, it will call ajax
If clicking the button show, it will show detail order by id
if clicking button show again, it will hide detail order by id
I want when hide detail order, it does not call ajax
So it only calls ajax if you want to show detail order
How can I do it?