关于前端获取后端数据，通过vue的v-for指令遍历渲染到前端出现数据覆盖的问题

我最近在做毕设，关于点餐系统的。现在需要将数据库中保存的所有用户订单都在前端页面显示。每一个订单中的商品及数量不一定相同。我采用的数据交互的数据格式是JSON数据。我在后端，每次都将每一个订单的所包含的每一样商品数据以字典的形式存在列表中。然后在前端将这一列表转存到前端js代码中定义的列表中。

之前学习了一段时间vue，就通过v-for指令从列表中依次将每一订单的商品信息渲染到前端页面上。但是我发现前端页面最终显示的商品信息却都是最后一个订单中的商品信息。遍历的最后一个订单中商品信息会将前面遍历的订单中的商品信息覆盖掉。

我尝试着在每次获取到一个订单编号的时候就直接去后端数据库中获取当前订单编号的商品信息，但还是没有解决上面出现的问题。

以下是我的相关代码：

前端js：

get_allOrder_info() {

var url = 'http://127.0.0.1:8000' + '/allOrders/info/';

axios.get(

url,

{

params: {

page: this.page,

page_size: this.page_size,

ordering: this.ordering

responseType: 'json',

withCredentials: true

}

)

.then(response => {

this.order_infos = response.data.order_list;

this.count = response.data.count;

for (var i = 0; i < this.order_infos.length; i++) {

this.order_id = this.order_infos[i].id;

console.log(this.order_id);

// this.get_allOrder_good(this.order_infos[i].id);

var url = 'http://127.0.0.1:8000' + '/allOrders/good/';

axios.get(

url,

{

params: {

order_id: this.order_id,

ordering: this.ordering

responseType: 'json',

withCredentials: true

}

)

.then(response => {

this.order_goods = response.data.order_good_list;

console.log(response.data.order_good_list);

// console.log(this.order_goods[1].name);

})

.catch(error => {

console.log(error + '获取订单商品表失败');

})

}

})

.catch(error => {

console.log(error + '获取订单信息表失败');

})

前端html：

<li>

<span class="create_time">成交时间：<em>[[info.create_time]]</em></span>

</li>

</ul>

<tr>

<li class="col03">[[good.price]]<span>元</span></li>

<li class="col04">[[good.count]]</li>

</ul>

</td>

<td class="td2">[[info.pay_method]]</td>

<td class="td3">[[info.amount]]<span>元</span></td>

<td class="td4">[[info.status]]</td>

</tr>

</table>

</div>

后端python，Django：

class AllOrderInfosView(View):
    def get(self, request):
        page = request.GET.get('page')
        page_size = request.GET.get('page_size')
        ordering = request.GET.get('ordering')
        orders = OrderInfo.objects.filter(status=1, is_delete=False).order_by(ordering)
        # 分页
        paginator = Paginator(orders, per_page=page_size)
        # 获取指定页面的数据
        page_orders = paginator.page(page)
        order_list = []
        for order in page_orders.object_list:
            order_list.append({
                'id': order.order_id,
                'amount': order.total_amount,
                'create_time': order.create_time,
                'pay_method': order.get_pay_method_display(),
                'status': order.get_status_display()
            })
        # 得到总页数
        total_num = paginator.num_pages
        return JsonResponse({'code': 0, 'errmsg': 'ok', 'order_list': order_list, 'count': total_num})


class AllOrderGoodsView(View):
    def get(self, request):
        order_id = request.GET.get('order_id')
        ordering = request.GET.get('ordering')
        product_list = []
        order_products = OrderGoods.objects.filter(order_id=order_id).order_by(ordering)
        for order_product in order_products:
            product_list.append({
                'count': order_product.count,
                'price': order_product.price,
                'name': order_product.product.product_name,
                'image_url': order_product.product.img_url
            })
        return JsonResponse({'code': 0, 'errmsg': 'ok', 'order_good_list': product_list})

                            .then(response => {
                                if (Array.isArray(this.order_goods)) {
                                    this.order_goods.push(...response.data.order_good_list);
                                } else {
                                    this.order_goods = response.data.order_good_list;
                                }

                                console.log(response.data.order_good_list);

                                // console.log(this.order_goods[1].name);

                            })

错误如下：两个不一样的订单中的商品信息应该是不一样的，但是这里后一个遍历的订单商品信息将前一个给覆盖掉了

        order_infos: [], // 存放后端传递过来的订单信息表数据
        order_goods: [], // 存放后端传递过来的订单商品数据
        page: 1, // 当前页数
        page_size: 2, // 每页订单数量
        ordering: '-create_time',
        count: 0,  // 总页数
        order_id: ''
get_allOrder_info() {
            var url = 'http://127.0.0.1:8000' + '/allOrders/info/';
            axios.get(
                url,
                {
                    params: {
                        page: this.page,
                        page_size: this.page_size,
                        ordering: this.ordering
                    },
                    responseType: 'json',
                    withCredentials: true
                }
            )
                .then(response => {
                    this.order_infos = response.data.order_list;
                    this.count = response.data.count;
                    for (var i = 0; i < this.order_infos.length; i++) {
                        this.order_id = this.order_infos[i].id;
                        console.log(this.order_id);
                        // this.get_allOrder_good(this.order_infos[i].id);
                        var url = 'http://127.0.0.1:8000' + '/allOrders/good/';
                        axios.get(
                            url,
                            {
                                params: {
                                    order_id: this.order_id,
                                    ordering: this.ordering
                                },
                                responseType: 'json',
                                withCredentials: true
                            }
                        )
                            .then(response => {
                                this.order_goods = response.data.order_good_list;
                                console.log(response.data.order_good_list);
                                // console.log(this.order_goods[1].name);
                            })
                            .catch(error => {
                                console.log(error + '获取订单商品表失败');
                            })
                    }

                })
                .catch(error => {
                    console.log(error + '获取订单信息表失败');
                })
        },get_allOrder_info() {
            var url = 'http://127.0.0.1:8000' + '/allOrders/info/';
            axios.get(
                url,
                {
                    params: {
                        page: this.page,
                        page_size: this.page_size,
                        ordering: this.ordering
                    },
                    responseType: 'json',
                    withCredentials: true
                }
            )
                .then(response => {
                    this.order_infos = response.data.order_list;
                    this.count = response.data.count;
                    for (var i = 0; i < this.order_infos.length; i++) {
                        this.order_id = this.order_infos[i].id;
                        console.log(this.order_id);
                        // this.get_allOrder_good(this.order_infos[i].id);
                        var url = 'http://127.0.0.1:8000' + '/allOrders/good/';
                        axios.get(
                            url,
                            {
                                params: {
                                    order_id: this.order_id,
                                    ordering: this.ordering
                                },
                                responseType: 'json',
                                withCredentials: true
                            }
                        )
                            .then(response => {
                                this.order_goods = response.data.order_good_list;
                                console.log(response.data.order_good_list);
                                // console.log(this.order_goods[1].name);
                            })
                            .catch(error => {
                                console.log(error + '获取订单商品表失败');
                            })
                    }

                })
                .catch(error => {
                    console.log(error + '获取订单信息表失败');
                })
        },

 <!-- TODO:要通过 v-for 指令循环显示出订单'基本信息'表中的数据 -->
                <div class="detail"  v-for="info in order_infos">
                    <ul class="order_list">
                        <li>
                            <span class="orderId">订单编号：<em>[[info.id]]</em></span>
                            <span class="create_time">成交时间：<em>[[info.create_time]]</em></span>
                        </li>
                    </ul>
                    <table class="order_list_table">
                        <tr>
                            <td class="td1">
                                <!-- TODO:要通过 v-for 指令循环显示出订单'商品'表中的数据 -->
                                <ul class="order_goods_list clearfix" v-for="good in order_goods">
                                    <li class="col01"><img :src="good.image_url"></li>
                                    <li class="col02">[[good.name]]</li>
                                    <li class="col03">[[good.price]]<span>元</span></li>
                                    <li class="col04">[[good.count]]</li>
                                </ul>
                            </td>
                            <td class="td2">[[info.pay_method]]</td>
                            <td class="td3">[[info.amount]]<span>元</span></td>
                            <td class="td4">[[info.status]]</td>
                        </tr>

                    </table>
                </div>

class AllOrderInfosView(View):
    def get(self, request):
        page = request.GET.get('page')
        page_size = request.GET.get('page_size')
        ordering = request.GET.get('ordering')
        orders = OrderInfo.objects.filter(status=1, is_delete=False).order_by(ordering)
        # 分页
        paginator = Paginator(orders, per_page=page_size)
        # 获取指定页面的数据
        page_orders = paginator.page(page)
        order_list = []
        for order in page_orders.object_list:
            order_list.append({
                'id': order.order_id,
                'amount': order.total_amount,
                'create_time': order.create_time,
                'pay_method': order.get_pay_method_display(),
                'status': order.get_status_display()
            })
        # 得到总页数
        total_num = paginator.num_pages
        return JsonResponse({'code': 0, 'errmsg': 'ok', 'order_list': order_list, 'count': total_num})


class AllOrderGoodsView(View):
    def get(self, request):
        order_id = request.GET.get('order_id')
        ordering = request.GET.get('ordering')
        product_list = []
        order_products = OrderGoods.objects.filter(order_id=order_id).order_by(ordering)
        for order_product in order_products:
            product_list.append({
                'count': order_product.count,
                'price': order_product.price,
                'name': order_product.product.product_name,
                'image_url': order_product.product.img_url
            })
        return JsonResponse({'code': 0, 'errmsg': 'ok', 'order_good_list': product_list})

现在变成了这样，上面一个订单的商品只有‘羊肉串’，下面的订单商品则是剩下的三样

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632