Vue.JS:除非我打开开发工具,否则变量不会更新

Posted

技术标签:

【中文标题】Vue.JS:除非我打开开发工具,否则变量不会更新【英文标题】:Vue.JS: Variable doesn’t update unless I open dev tools 【发布时间】:2020-07-06 12:49:24 【问题描述】:

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

只有当我在 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>

我的一些数据变量……

        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 剃须刀页面一起使用。

我目前正在通过 header 标签内的下面调用 Vue。

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

【问题讨论】:

【参考方案1】:

我认为这是摘要周期的问题,在desiredPriceComputed 中尝试用 this.$nextTick(() => ...) 或简单的 setTimeout(fn, 0) 包装它,如果它有效的话分享更多细节或尝试更改按钮的更新方式(使用一个按钮而不是 2 个)

【讨论】:

刚刚查看了 $nextTick()。我以前没听说过这个。我应该包装整个计算变量还是只包装函数的内容? desiredPriceComputed: function () this.$nextTick(() =&gt; ....) 这没有帮助。事实上,计算属性现在根本没有正确更新。 pastebin.com/2iYVkUwwgyazo.com/3f2d4ee5b437913a5ee3d09dda395fea 能不能恢复旧版本使用&lt;button v-if="!desiredPriceComputed" class="btn btn-success" disabled style="margin-top: 25px;"&gt; 我刚刚恢复了我之前的实现。类似,见下文。你似乎对 Vue 非常了解。这是一个错误吗? &lt;div class="form-row float-right"&gt; &lt;button :disabled="btnDisabled" class="btn btn-success" style="margin-top: 25px;" v-on:click="createAlert()"&gt; Alert me when desiredPriceComputed &lt;/button&gt; &lt;/div&gt;【参考方案2】:

感谢@Mohamed Belhaj 的回答(他帮助解决了他的回答问题)。

出了什么问题

计算属性将 bool 值设置为 true 或 false。

如果模板中没有使用计算属性,则永远不会调用函数,这就是打开开发工具更新变量的原因。

分辨率

更新模板 html 以引用计算的属性,以便调用它。

                        <div class="form-row float-right">
                            <button v-if="!desiredPriceComputed" disabled class="btn btn-success" 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>

【讨论】:

以上是关于Vue.JS:除非我打开开发工具,否则变量不会更新的主要内容,如果未能解决你的问题,请参考以下文章

除非我调整窗口大小,否则 QML 文本不会更新

除非主窗口未聚焦,否则不会更新 QLabel

除非主窗口未聚焦,否则不会更新 QLabel

除非轮到玩家,否则 TBMP 不会获得游戏更新

Google 地图活动 - 除非您更新 Google Play 服务,否则不会运行

除非在视图上手动更新,否则不会自动触发视图上的更新触发器