Vue.js 验证在第一次输入时返回false，在下一次输入时返回true

此时间选择器组件是表单生成器的一部分。我传入一些项目，它们将被处理为文本输入、数字输入。。。等等

由于您不能将验证函数存储到数据库中，因此我们将正则表达式模式存储到数据库中。对于本例，我只想检查该字段是否为空

该表单生成一个能够验证输入的时间选择器组件。不幸的是，对于第一个输入，验证返回

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>

我创造了一个复制的例子

只需选择一个时间，您将收到一条错误消息。选择其他时间，验证将返回

true

。清除该字段也将返回

true

---

有人知道这里出了什么问题吗？

出于某些原因

getValidation

仅使用旧值运行。 如果我们改为

maskItem.value

，它就会工作

 getValidation: function(maskItem) {
      return maskItem.validation.map(rule => value => {
        const newValue = maskItem.value
        return (newValue && rule.pattern.test(newValue)) || rule.message;
      });
    },

---

检查这里有一个不正确的假设：

this.$emit（“输入”，newValue）；
this.formatBasedRules=this.getValidationRules（newValue）；

然后在

getValidationRules

中：

const result=规则（此.value）；

发出

input

事件将立即更新父组件中的数据，但在下一轮渲染发生之前，不会使用该数据更新子组件。渲染不会立即发生，而是在下一个刻度开始时进行批处理。在渲染发生之前，

value

prop的新值不会传递给子级。因此，

此.value

在

getValidationRules

中访问时仍然是旧值

我倾向于将

formatBasedRules

写为计算属性，这样它总是与

value

同步。可能需要一个标志，以防止在初次尝试用户输入之前显示错误

 getValidation: function(maskItem) {
      return maskItem.validation.map(rule => value => {
        const newValue = maskItem.value
        return (newValue && rule.pattern.test(newValue)) || rule.message;
      });
    },