Question

显示一个变量itemListPrice中的数据时遇到问题。我已经在控制台中进行了检查，并且数据已填充到itemListPrice中，但其未显示在我的html中，我是否将其全部加载错了？

这是标记

<div id="app2">
    <div id="TableContainer" style="width:798px !important">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <td><label>Catalog Name</label></td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ currentCatalogName }}</td>
                    </tr>
                </tbody>
            </table>

            <table class="table">
                <thead>
                    <tr>
                        <td><label>Item Name</label></td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td> {{ itemPriceList.Name }}</td>
                    </tr>
                </tbody>
            </table>

            <table class="table">
                <thead>
                    <tr>
                        <td colspan="2"><label>Item List</label></td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td width="575px">${{ itemPriceList.ItemListPrice }}</td>
                        <td>${{ itemPriceList.ItemListPrice }}</td>
                    </tr>
                </tbody>
            </table>

            <table class="table">
                <thead>
                    <tr>
                        <td colspan="3"><label>Item Features</label></td>
                        <td></td>
                    </tr>
                </thead>
                <tbody>
                    <template v-for="item in itemPriceList.ItemFeatures">
                        <tr v-if="item.FeatureQuantity != 0">
                            <td width="250px">{{ item.FeatureName }}</td>
                            <td>{{ item.FeatureQuantity }}</td>
                        </tr>
                    </template>
                </tbody>
            </table>

            <table class="table">
                <thead>
                    <tr>
                        <td><label>Item IAM</label></td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ itemPriceList.ItemIAM }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

这是我的代码

new Vue({
    el: '#app2',
    beforeCreate: function () {
        StartBusyIndicator("#ItemPriceListWindow");
    },
    created: function () {
        this.GetItemDetails();
    },
    mounted: function () {
        StopBusyIndicator("#ItemPriceListWindow");
    },
    data: {
        itemPriceList: [],
        orderItems: currentOrderItems,
        currentCatalogName: currentCatalog,
        priceList: null
    },
    methods: {
        GetItemDetails: function () {
            TryCatch(function() {
                let result = GetItemPriceDetails();
                this.itemPriceList = result;
                priceList = result;
            });
        },
        GetOrderItems: function () {

        },
        OptionPriceSplitter: function (optionprice) {
            return TryCatch(function() {
                let sentenceSplit = optionprice.split('& ');
                let comp = '';

                for (let i = 0; i < sentenceSplit.length; i++) {
                    comp += sentenceSplit[i] + '\n';
                }
                return sentenceSplit;
            });
        },
        GlobalListPriceCalculation: function (globalgroupid) {
            return TryCatch(function() {
                let listPrice = 0.00;
                let priceList = this.itemPriceList;
                let result = priceList.GlobalListPrices.filter(function(item) {
                    if (item.GlobalGroupID == globalgroupid) {
                        listPrice = listPrice + item.Price;
                    }
                });

                if (listPrice == 0) {
                    listPrice = "";
                } else {
                    listPrice = "$" + listPrice.toFixed(2);
                }
                return listPrice;
            });
        }
    }
});

Answer 1

假设TryCatch(cb)与

类似

function TryCatch(cb){ let x = null; try { x = cb() } catch(e) {} return x; }

您放松 2件重要的事情：

this（您可以通过cb.call(this)进行绑定）
非常有用的错误消息

更多点：

我已在控制台中签入

签出出色的ff和chrome vue-devtools浏览器插件

itemPriceList = []

您将itemPriceList初始化为数组，将其用作数组item in itemPriceList，但也将其用作对象{{ itemPriceList.Name }}-它是什么？

数据未显示在html中

1 个答案: