嵌套的v-for回圈不呈現

我試圖以類似行的方式顯示一個包含訂單和相應訂單詳細資訊的表格。但是，我遇到了一個難題。有天才嗎？我在解決這個問題時嘗試了各種變體，但我被卡住了。有人提到，也許使用“計算”??屬性可以解決問題，但我無法讓它作業>=/。一點幫助，也許很多幫助，將不勝感激！

<div id="MyOrdersApp" >
    <table >
        <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>
            <tr v-for="(order, i) in parsedOrders" style="background-color:snow;text-align:center;" >
                <td>{{order.OrderId}}</td>
                <td>
                    <ul>
                        <li v-if="order.CartLineItems != null" v-for="item in order.CartLineItems;" :key="uniqueKey">
                            <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: [],
                theOrders: [],
                uniqueKey: 0
            },
            computed: {
                cartLineItems: function () {
                    return this.parsedOrders[0].CartLineItems;
                }
            },
            methods: {
                getMyOrders: function () {
                    var scope = this;
                    this.$http.get("https://"   location.host   "/Home/GetMyOrders").then(resp => {
                        if (resp.status == 200) {
                            this.theOrders = resp.body;
                            scope.setCartLineItems();
                        }
                    });
                },
                setCartLineItems: function () {
                    var scope = this;
                    var cartLineItems = [];
                    var cartDict = {};

                    for (var i = 0; i < this.theOrders.length; i  ) {
                        cartDict = {};
                        cartLineItems = [];

                        cartDict = JSON.parse(this.theOrders[i].ProductIdsAndQuantity).CartLineItems;

                        for (var key in cartDict) {
                            var lineItem = JSON.parse(cartDict[key]);
                            cartLineItems.push(lineItem);
                        }
                        //this.allorders[i].CartLineItems = cartLineItems;
                        //scope.$set(this.allorders[i], 'CartLineItems', cartLineItems);
                        //this.theOrders[i].CartLineItems = cartLineItems;
                        scope.$set(this.theOrders[i], 'CartLineItems', cartLineItems);
                    }

                    this.parsedOrders = this.theOrders;

                    console.log("~~ Parsed Cart! ~~ ");
                    console.log(this.parsedOrders);
                    console.log(this.parsedOrders[1].CartLineItems);
                }
            },
            mounted: function () {
                var scope = this;
                this.getMyOrders();
                setTimeout(x => { scope.$forceUpdate(); scope.uniqueKey  ; }, 1000);
            }
        });
</script>

我應該如何修改它以正確顯示“CartLineItems”中的值？

順便說一句， parsedOrders 看起來像這樣：

如果我注釋掉內部 v-for，其他列顯示正常，表格如下所示：

Some more background... when I fetch the orders via the $http call and the server returns the array of JSON, the ProductIdsAndQuantity property needs to be parsed as a JSON object and then set as it's own property on the order in question. The tricky part here is that the Vue component seems to not be reacting to the change in the order object array data. Hence, the need for a parsedOrders property and/or the use of scope.$forceUpdate(); or scope.uniqueKey ;. These were proposed solutions to the issue of the Vue component not re-rendering. However, these solutions are not working. So I'm stuck scratching my head...

uj5u.com熱心網友回復：

您不能在導致問題的同一陳述句中同時使用 v-for 和 v-if。所以在這種情況下嘗試使用計算

<tbody>
            <tr v-for="(order, i) in parsedOrders" style="background-color:snow;text-align:center;" >
                <td>{{order.OrderId}}</td>
                <td>
                    <ul>
                        <li v-for="(item, index) in getCartLineItems(order)" :key="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>

并在計算

computed: {
  getCartLineItems() {
   return order => {
    if(order?.CartLineItems && order.CartLineItems.length) return order.CartLineItems;
    return [];
   }
 }
}

標籤：vue.js vue-component

上一篇：vue-插值html值

下一篇：VueJs3-Vuex：未捕獲的型別錯誤：商店不是函式