0

我有两个组件。我通过 vuex 存储设置和获取数据

我的第一个组件是这样的：

<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>

我的第二个组件是这样的：

<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>

笔记 ：

setOrderList()：这将调用 ajax 并将响应（订单数据列表）保存在：getOrderList setOrderDetail()：这将调用 ajax 并将响应（按 id 的订单数据）保存在：getOrderDetail

每次点击按钮show，都会调用ajax

如果单击按钮显示，它将按 id 显示详细顺序

如果再次单击按钮显示，它将按 id 隐藏详细顺序

我想要隐藏详细信息订单时，它不调用ajax

因此，如果您想显示详细顺序，它只会调用 ajax

我该怎么做？

4

0 回答 0