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(() => ....)
这没有帮助。事实上,计算属性现在根本没有正确更新。 pastebin.com/2iYVkUwwgyazo.com/3f2d4ee5b437913a5ee3d09dda395fea
能不能恢复旧版本使用<button v-if="!desiredPriceComputed" class="btn btn-success" disabled style="margin-top: 25px;">
我刚刚恢复了我之前的实现。类似,见下文。你似乎对 Vue 非常了解。这是一个错误吗? <div class="form-row float-right"> <button :disabled="btnDisabled" class="btn btn-success" style="margin-top: 25px;" v-on:click="createAlert()"> Alert me when desiredPriceComputed </button> </div>
【参考方案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:除非我打开开发工具,否则变量不会更新的主要内容,如果未能解决你的问题,请参考以下文章