Question

我有各种.js函数计算模式中的订单小计，税金和最终总价。计算是正确的，但在模态退出/模态弹出窗口中似乎没有清除变量。这意味着超过第一个模态的每个模态只是将它们的（正确的）计算添加到之前的模型中，而不是从零开始，因为我正在努力实现它。

我在.js源代码中设置了断点，它告诉我.js数字是不归零的，即使数字传回后它们就设置为零。

这是第一次和第二次模态调用的图片集来说明这个问题（两者都是右下角的数字）：

这是我的HTML，以防它实际上是一个基于标签的问题：

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/_Layout.cshtml";
}
<div class="col-sm-3">&nbsp;</div>
<div class="panel col-sm-6 col-xs-12">
    <div class="panel-title text-center" style="padding-top:20px;">
        <h3 style="font-weight:bolder">Cart Contents</h3>
        <img src="/img/cart.png" style="height:10%;width:10%;padding-bottom:5%;" />
    </div>
    <div class="text-center" style="padding-top:10px;">
        @{
            Dictionary<string, object> cart = Context.Session.Get<Dictionary<string, Object>>("cart");
            decimal itemSubTotal = 0;
            decimal subTotal = 0;
            decimal itemTaxTotal = 0;
            decimal taxTotal = 0;
            decimal salesTaxRate = 0.13M; //m required for a literal
            decimal orderTotal = 0;



        }
        <table class="table table-striped">
            <tr style="font-weight:bolder;">

                <th class="col-xs-2 text-center">Product Code</th>
                <th class="col-xs-2 text-center">Qty</th>
                <th class="col-xs-2 text-center">Item Name</th>
                <th class="col-xs-2 text-center">Price</th>
            </tr>
            @{
                if (cart != null)
                {

                    foreach (var key in cart.Keys)
                    {
                        ProductViewModel item = JsonConvert.DeserializeObject
                        <ProductViewModel>
                        (Convert.ToString(cart[key]));

                        if (item.Qty > 0)
                        {

                            subTotal += item.MSRP * item.Qty;


                            <tr>
                                <td class="col-xs-2 text-center">@item.Id</td>
                                <td class="col-xs-2 text-center">@item.Qty</td>
                                <td class="col-xs-2 text-left">@item.ProductName</td>
                                <td class="col-xs-2 text-center">@string.Format("{0:C}", @item.MSRP)</td>
                            </tr>

                        }
                    }

                    taxTotal += Decimal.Multiply(subTotal, salesTaxRate);
                    orderTotal += subTotal + taxTotal;
                }
            }
        </table>
        <hr />
        <table class="table table-striped">
            <tr>
                <th colspan="4" class="col-xs-4 text-left" style="font-size:large;font-weight:bold;">
                    Cart
                    Totals
                </th>
            </tr>
            <tr>
                <td class="col-xs-2 text-right">Subtotal: </td>
                <td class="col-xs-4 text-left" id="subtotal">@string.Format("{0:C}", @subTotal)</td>
            </tr>
            <tr>
                <td class="col-xs-2 text-right">Tax Total: </td>
                <td class="col-xs-4 text-left" id="taxtotal">@string.Format("{0:C}", @taxTotal)</td>
            </tr>
            <tr>
                <td class="col-xs-2 text-right">Order Total: </td>
                <td class="col-xs-4 text-left" id="ordertotal">@string.Format("{0:C}", @orderTotal)</td>
            </tr>
            @{ 
                @subTotal = 0;
                @taxTotal = 0;
                @orderTotal = 0;
            }
        </table>
        <div class="text-center">
            <form asp-controller="Cart" asp-action="AddCart" method="post" role="form">
                @if (Context.Session.GetString(SessionVars.User) != null)
                {
                    <button type="submit" class="btn btn-sm btn-primary" id="modalbtn">Add Cart</button>
                }
                &nbsp;<a href="/Cart/ClearCart" class="btn btn-sm btn-success">Clear Cart</a>
            </form>
        </div>
    </div>
  </div>

这是正在进行计算的.js文件：

   var link = '/GetOrders';
    var detailslink = '/GetOrderDetails/';
    var subtotal = 0;
    var finalPrice = 0;
    var taxAmount = 0;
    // register modal component
Vue.component('modal', {
    template: '#modal-template',
    props: {
        item: {},
        modalItem: {},
        details: []
    },
})
new Vue({
    el: '#orders',
    methods: {
        GetOrders: function () {
            var self = this
            axios.get(link).then(function (response) {
                self.orders = response.data;

            }, function (error) {
                console.log(error.statusText);
            });
        },
        loadAndShowModal: function () {
            var self = this
            axios.get(detailslink + this.modalItem.id).then(function (response) {
                self.details = response.data;
                self.showModal = true;
            }, function (error) {
                console.log(error.statusText);
            });
        },
    },
    mounted: function () {
        this.GetOrders();
    },
    data: {
        orders: [],
        showModal: false,
        modalItem: {},
        details: []
    }
});
function formatDate(date) {
    var d;
    if (date === undefined) {
        d = new Date(); //no date coming from server
    }
    else {
        var d = new Date(Date.parse(date)); // date from server
    }
    var _day = d.getDate();
    var _month = d.getMonth() + 1;
    var _year = d.getFullYear();
    var _hour = d.getHours();
    var _min = d.getMinutes();
    if (_min < 10) { _min = "0" + _min; }
    return _year + "-" + _month + "-" + _day + " " + _hour + ":" + _min;
}


function calcLinePrice(qtySold, msrp)
{

    var linePrice = qtySold * msrp;
    subtotal += linePrice;
    finalPrice += linePrice;
    return linePrice.toFixed(2);

    finalPrice = 0;
    subtotal = 0;

}

function calcSubtotal()
{

    return subtotal.toFixed(2);
    subtotal = 0;

    finalPrice = 0;
    subtotal = 0;
}

function calcTax() {

    taxAmount = finalPrice * 0.13

    return taxAmount.toFixed(2);
    taxAmount = 0;

}


function calcFinalPrice() {
    var total = 0;
    total = finalPrice + taxAmount;
    return total.toFixed(2);

    finalPrice = 0;
    subtotal = 0;

}

正如您所看到的，我正在将每个计算中的finalTotal和小计归零，以试图解决这个问题。似乎无论我做什么，他们都拒绝对页面重新加载的任何内容进行归零。有什么帮助吗？

编辑：我试图在错误的点上归零。我通过将calcFinalPrice（）函数（最后一个函数）改为此来解决这个问题：

function calcFinalPrice() {
    var total = 0;
    total = finalPrice + taxAmount;
    taxAmount = 0;
    subtotal = 0;
    finalPrice = 0;
    return total.toFixed(2);


}

等于0时，.js变量不返回零

0 个答案: