我正在开发一个v文本字段，当您按Enter或从文本字段模糊（失去焦点）时，将允许1 + 1之类的简单数学表达式生成2。到目前为止，这是我的代码。
<template>
<v-text-field
:rules="rules"
@blur="compute"
@keydown.enter="compute"
v-model="localValue"
validate-on-blur
/>
</template>
<script>
import { create, all } from 'mathjs'
const math = create(all)
export default {
name: "NumericTextField",
props: ["value"],
data () {
return {
localValue: this.value,
}
},
watch: {
value (v) {
this.localValue = v
},
},
methods: {
compute () {
try {
const result = math.evaluate(this.localValue)
this.$emit("input", result)
} catch (e) {
console.log("compute error", e)
}
},
},
computed: {
rules () {
return [v => /^([0-9]*[.])?[0-9]+$/.test(v) || "Must be numeric."]
},
},
}
</script>
有一种奇怪的行为，就是当我模糊文本字段时，例如，跳到下一个文本字段，blur validate-on-blur生效，@ blur计算结果也是如此。验证在这场比赛中获胜，我留下了一个违反错误，但结果很快变为了应该有效的数字答案。具体来说，我输入1 + 1（由于其中有加号，因此不是数字）。当我按Tab键时，文本框将更改为2（非常好），并且还会出现验证错误，抱怨1 + 1不是数字。那是不希望的。如果结果是数字，我希望验证考虑到这一点。但是我不知道如何控制这种比赛状态。
我已经尝试过，并成功锁定了页面的表单，并通过给我的表单ref然后在计算结束时调用this。$ refs.myForm.validate（）来显式重新验证字段上的所有表单。但这使我的组件不是真正可重用的，因为它需要了解父窗体。此外，它正在重新评估所有基于模糊的表单验证，如果一页纸很多，我认为这可能会变得昂贵。
有控制种族状况的方法吗？还是可以解决？
我认为没有任何方法可以阻止Vuetify的validate-on-blur先运行。因此，这是您可以在没有它的情况下进行偷偷摸摸的解决方法。您的模板如下所示：
<template>
<v-text-field
:rules="rules"
@blur="validate"
@keydown.enter="validate"
@focus="clearRules"
@input="clearRules"
v-model="localValue"
/>
</template>
由于您不会使用validate-on-blur，因此您需要手动编码的设置和清除rules，否则它们将立即应用于输入。用一个空数组定义一个数据属性：
data() {
return {
rules: []
}
},
rules每当该字段聚焦或发生输入时，将清除。现在所需要做的就是在每个blur/上运行一个validate方法，keydown这将：1）设置规则，以及2）计算结果：
validate() {
this.setRules();
this.compute();
},
setRules() {
this.rules = [v => /^([0-9]*[.])?[0-9]+$/.test(v) || "Must be numeric."];
},
compute() {
try {
const result = math.evaluate(this.localValue)
this.$emit("input", result)
} catch(e) {
console.log("compute error", e)
}
},
这是工作示例（我用它eval代替了您的mathjs库）：
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
// ...
rules: []
}
},
methods: {
validate() {
this.setRules();
this.compute();
},
setRules() {
this.rules = [v => /^([0-9]*[.])?[0-9]+$/.test(v) || "Must be numeric."];
},
compute() {
try {
this.localValue = eval(this.localValue);
} catch(e) {
// console.log("compute error", e)
}
},
clearRules() {
this.rules = [];
}
}
})<div id="app">
<v-app>
<v-text-field
:rules="rules"
@blur="validate"
@keydown.enter="validate"
@focus="clearRules"
@input="clearRules"
v-model="localValue"
></v-text-field>
</v-app>
</div>
<!-- LIBRARIES -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>从这里汲取灵感，并与之合作的想法blur。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句