Vue中嵌套v-for循环不渲染CartLineItems，如何修改代码正确展示？

问题核心原因 #

1. 嵌套v-for的key属性使用了全局唯一值uniqueKey，所有循环生成的
2. 元素key完全重复，Vue的虚拟DOM diff算法会判定这些元素是同一个，不会正常渲染多个子项
3. v-if和v-for同时绑定在
4. 元素上，Vue优先级规则下v-for优先级高于v-if，会导致不必要的循环判断，容易出现逻辑异常
5. 冗余的computed属性、强制更新逻辑、全局uniqueKey变量完全无用，反而增加干扰

修复后代码 #

模板部分

<div id="MyOrdersApp" class="table-responsive">
    <table class="table table-striped table-bordered table-condensed">
        <thead>
            <tr style="color:black;font-size:2em;">
                <th style="text-align:center;">Order Id</th>
                <th style="text-align:center;">ProductIdsAndQuantity</th>
                <th style="text-align:center;">Total Cost</th>
                <th style="text-align:center;">Order Status</th>
                <th style="text-align:center;">Shipment Tracking URL</th>
                <th style="text-align:center;">Created Date</th>
            </tr>
        </thead>
        <tbody>
            <!-- 外层循环加唯一key -->
            <tr v-for="(order, i) in parsedOrders" :key="order.OrderId" style="background-color:snow;text-align:center;" class="align-content-center;">
                <td>{{order.OrderId}}</td>
                <td>
                    <!-- v-if移到外层容器，避免和v-for同用 -->
                    <ul v-if="Array.isArray(order.CartLineItems) && order.CartLineItems.length">
                        <!-- 用订单ID+子项索引生成唯一key -->
                        <li v-for="(item, index) in order.CartLineItems" :key="`${order.OrderId}_${index}`">
                            <img :src="item.ProductImageUrl" />
                            <span>{{item.ProductName}} &nbsp;|&nbsp;</span>
                            <span>Quantity: {{item.Quantity}} &nbsp;|&nbsp;</span>
                        </li>
                    </ul>
                </td>
                <td style="color:black;font-size:1.5em;font-weight:bold;">{{order.TotalRevenue | currency }}</td>
                <td>{{order.OrderStatus}}</td>
                <td>{{order.ShipmentTrackingURL}}</td>
                <td>{{order.CreatedDate | formatDate }}</td>
            </tr>
        </tbody>
    </table>
</div>

逻辑部分

<script>
var MyOrdersApp = new Vue({
    el: '#MyOrdersApp',
    data: {
        parsedOrders: []
    },
    methods: {
        getMyOrders: function () {
            this.$http.get("https://" + location.host + "/Home/GetMyOrders").then(resp => {
                if (resp.status == 200) {
                    this.setCartLineItems(resp.body);
                }
            });
        },
        setCartLineItems: function (rawOrders) {
            // 直接生成新的处理后数组，全量替换天然触发响应式，无需额外$set
            this.parsedOrders = rawOrders.map(order => {
                const cartDict = JSON.parse(order.ProductIdsAndQuantity).CartLineItems;
                const cartLineItems = [];
                for (var key in cartDict) {
                    cartLineItems.push(JSON.parse(cartDict[key]));
                }
                // 返回新对象避免响应式丢失
                return Object.assign({}, order, {
                    CartLineItems: cartLineItems
                })
            });
            console.log("~~ Parsed Cart! ~~ ", this.parsedOrders);
        }
    },
    mounted: function () {
        this.getMyOrders();
    }
});
</script>

内容的提问来源于stack exchange，提问作者ajavad