vue.js - How to call ajax only when show detail on vue component?

Question

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?

Answer 1

Waitting for answers