此时间选择器组件来自表单生成器。我传入了一些项目,它们将被处理为文本输入,数字输入等。
由于您无法将验证功能存储到数据库中,因此我们将正则表达式模式存储到数据库中。对于此示例,我只想检查该字段是否为空。
该表单生成一个时间选择器组件,该组件可以验证输入。不幸的是,对于第一个输入,验证返回false
。再次更改时间时,它将返回true
。清除该字段还将返回true
。
我创建了一个演示。消费组件使用此代码
<template>
<v-app id="inspire">
<TimeField
v-for="maskItem in maskItems"
:key="maskItem.fieldId"
:value="maskItem.value"
:rules="getValidation(maskItem)"
@input="onMaskItemValueUpdated(maskItem.fieldId, ...arguments)"
/>
</v-app>
</template>
<script>
import TimeField from "./components/TimeField";
export default {
components: {
TimeField
},
data: function() {
return {
maskItems: [
{
fieldId: 1,
value: null,
validation: [
{
pattern: new RegExp(".{1,}"),
message: "This field is required"
}
]
}
]
};
},
methods: {
getValidation: function(maskItem) {
return maskItem.validation.map(rule => value =>
(value && rule.pattern.test(value)) || rule.message
);
},
onMaskItemValueUpdated: function(fieldId, newValue) {
this.maskItems.find(
fieldToUpdate => fieldToUpdate.fieldId === fieldId
).value = newValue;
}
}
};
</script>
如果时间选择器应该显示特定语言环境的时间格式,它本身就可以格式化时间。格式化日期时,文本字段会将格式化日期传递给验证。这是错误。为了处理此行为,我创建了getValidationRules
函数,并将正确的值传递给验证。但是,它正在使用此代码
<template>
<v-menu :value="showMenu" max-width="290px">
<template v-slot:activator="{ on }">
<v-text-field
:value="formattedTime"
clearable
v-on="on"
:required="true"
:rules="formatBasedRules"
@input="selectValue"
></v-text-field>
</template>
<v-time-picker :value="value" @input="selectValue"/>
</v-menu>
</template>
<script>
export default {
props: {
value: {
type: String,
default: ""
},
rules: {
type: Array,
default: () => []
}
},
data: function() {
return {
showMenu: false,
formatBasedRules: [true]
};
},
computed: {
formattedTime: function() {
// ... !! format time here !! ...
return this.value;
}
},
mounted: function() {
this.formatBasedRules = this.getValidationRules();
},
methods: {
selectValue: function(newValue) {
this.showMenu = false;
this.$emit("input", newValue);
this.formatBasedRules = this.getValidationRules();
},
getValidationRules: function() {
for (const rule of this.rules) {
const result = rule(this.value);
if (typeof result === "string") {
return [result];
}
}
return [true];
}
}
};
</script>
我创建了一个复制示例
https://codesandbox.io/s/menu-picker-validation-eorep
只需选择一个时间,您就会收到一条错误消息。选择其他时间,验证将返回true
。清除该字段还将返回true
。
有人知道这是怎么回事吗?
答案 0 :(得分:1)
由于某些原因,getValidation
仅使用旧值运行。
如果我们更改为maskItem.value
,则可以使用
getValidation: function(maskItem) {
return maskItem.validation.map(rule => value => {
const newValue = maskItem.value
return (newValue && rule.pattern.test(newValue)) || rule.message;
});
},
答案 1 :(得分:1)
这里有一个错误的假设:
this.$emit("input", newValue);
this.formatBasedRules = this.getValidationRules(newValue);
,然后在getValidationRules
内:
const result = rule(this.value);
发出input
事件将立即更新父组件中的数据,但是直到下一轮渲染发生时才使用该数据更新子组件。渲染不会立即发生,而是在下一个刻度线开始时进行批量处理。在该渲染发生之前,value
道具的新值不会传递给子级。结果,this.value
在getValidationRules
中被访问时仍将是旧值。
我倾向于将formatBasedRules
写为计算属性,因此它总是与value
保持同步。可能需要一个标志来防止它显示错误,直到尝试进行用户输入为止。