javascript - Vue.JS：除非我打开开发工具，否则变量不会更新

问题描述

我有两个按钮，它们通过 v-if 标签根据变量显示。如果变量为假，则显示一个按钮，如果为真，则显示另一个按钮。

bool 变量仅在我在 chrome 中打开开发工具时才会更新……我不知道为什么会这样。

视频：https ://i.gyazo.com/95a90354fdcec849cc7e33aaa5e1d8b9.mp4

最后一帧截图：https ://gyazo.com/ecc0cbfbc01cf6f472cea48c6cc89a4a

按钮代码

<div class="form-row float-right">
                        <button v-if="btnDisabled" class="btn btn-success" disabled style="margin-top: 25px;">
                            Save
                        </button>
                        <button v-else class="btn btn-success" style="margin-top: 25px;"
                                v-on:click="createAlert()">
                            Alert me when {{desiredPriceComputed}}
                        </button>
                    </div>

我的一些数据变量……</p>

        btnDisabled: true,
        inputInvalid: false,
        hideProduct: false,
        hidePriceForm: false,
        busy: false,

desiredPriceComputed 的函数（其中按钮变量从 true 更改为 false。

desiredPriceComputed: function () {
            let input = this.desiredPriceInput;
            let pInput = parseFloat(this.desiredPriceInput);

            if (input == "") {
                this.inputInvalid = false;
                this.btnDisabled = true;
                this.cardAlert.desiredPrice = 0;
                return '';
            }
            if (Number.isNaN(pInput)) {
                this.inputInvalid = true;
                this.btnDisabled = true;
                this.cardAlert.desiredPrice = 0;
                return '';
            }
            if (pInput < 0) {
                this.inputInvalid = true;
                this.btnDisabled = true;
                this.cardAlert.desiredPrice = 0;
                return '';
            }
            if (pInput > 1000000000) {
                this.inputInvalid = true;
                this.btnDisabled = true;
                this.cardAlert.desiredPrice = 0;
                return '';
            }
            this.inputInvalid = false;
            this.btnDisabled = false;
            this.cardAlert.desiredPrice = pInput.toFixed(2);

            if (pInput > this.cardAlert.currentPrice) {
                return '$' + pInput.toFixed(2) + " or higher";
            }
            else if (pInput < this.cardAlert.currentPrice) {
                return '$' + pInput.toFixed(2) + " or lower";
            }
            else {
                return '$' + pInput.toFixed(2);
            }

        }

其他一些重要说明

我将 Vue 单文件组件与 ASP.NET MVC 剃须刀页面一起使用。

我目前正在通过标题标签内的以下内容调用 Vue。

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

标签： javascriptvue.js

javascript - Vue.JS：除非我打开开发工具，否则变量不会更新

问题描述

解决方案

推荐阅读