我有一个文本输入，允许用户在小数点后键入最多3位数的数字：
<v-text-field type="text" :value="num" @change="changeNum($event)" />
<p>{{ num }}</p>
...
export default {
data: () => ({
num: 0
}),
methods: {
changeNum(e) {
let v = parseFloat(e);
if (!isNaN(v)) {
this.num = parseFloat(v.toFixed(3));
}
}
}
};
如果我键入'123.456'，则键入num = 123.456。如果我附加文本'789'，那么输入将包含123.456789，但包含num = 123.456。因此，用户可能认为更改已经应用，但事实并非如此。。。
如果changeNum失败，我如何强制输入更新？
您可以通过在离开文本字段后仅使用v-model.lazy来更改数据，以及使用watch属性来保存旧值和新值，使我们能够在关注其他地方后控制类型化的值来实现您的用例。
new Vue({
el: '#app',
data: () => ({
num: 0
}),
watch: {
num(newv, oldv) {
let v = parseFloat(newv);
if (!isNaN(v)) {
this.num = parseFloat(v.toFixed(3));
} else {
this.num = oldv;
}
}
}
})#app {
padding: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Vue.delete">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.lazy="num" />
<p>out: {{ num }}</p>
</div>
</body>@change在将焦点更改为其他内容之前不会启动。要确保在键入时评估输入，请改用@input。它会随着每一次按键而启动。
此外，请跟踪最后一个值，以便您可以重置：
<v-text-field type="text" :value="num" @input="changeNum($event)" />
<p>{{ num }}</p>
...
export default {
data: () => ({
num: 0,
lastNum: 0
}),
methods: {
changeNum(e) {
let v = parseFloat(e);
if (!isNaN(v)) {
this.num = parseFloat(v.toFixed(3));
this.lastNum = this.num;
}
else {
this.num = this.lastNum;
}
}
}
};
我认为$forceUpdate应该解决你的问题。。
methods: {
changeNum(e) {
let v = parseFloat(e);
if (!isNaN(v)) {
this.num = parseFloat(v.toFixed(3));
this.$forceUpdate();
}
}
}