Vuetify vform验证结果在watch被延迟

Posted 2023-02-16

【中文标题】Vuetify vform验证结果在watch被延迟

【英文标题】：Vuetify vform validation result in watch is delayed

【发布时间】：2022-01-02 16:56:19

【问题描述】：

我这里有一个非常简单的表格

  <div id="app"class="pa-5">
    <h3>form Valid:  formValid </h3>
    <h3>input:  input </h3>
    <v-form ref="testForm" v-model="formValid">
      <v-text-field
        v-model="input"      
        :rules="nameRules"
        required
      ></v-text-field>
    </v-form>
 </div>

使用这样的用户界面

我在输入上有一个 watch 属性，它应该为每次击键打印 formValid 状态

但是，它会打印第一个字母为假，而后一个字母为真。表单有效状态似乎延迟了一次。

我猜它与 vue 生命周期钩子有关，但我不知道从哪里开始：/ 感谢您的帮助！Code Pen

【参考方案1】：

在你的 watch 方法被执行的那一刻，当作为计算属性包含的规则还没有被执行（或其他任何东西）时，控制台正在显示 formValid 的值。因此，在那一刻，formValid 的值是执行 nameRules 之前的值，这就是为什么写第一个字符时它是假的，而写第十个字符时它仍然是真的。如果您想要从表单验证中触发一个事件，您可以在 formValid 数据属性上创建另一个监视。

【讨论】：

您好，感谢您的回复。如果我想在表单输入更改时触发操作，我不确定观看 formValid 数据属性是否是一个好主意，而它们都是有效输入。我发现我可以将 watch 属性编辑为： async input(val) await this.$refs.testForm.validate();这样，如果似乎以某种方式解决了我的问题，但我不确定这是要解决的问题。无论如何感谢您的帮助！

【参考方案2】：

检查我制作的这个代码框：https://codesandbox.io/s/stack-70093759-d82kf?file=/src/components/TestForm.vue

我能够在观察者中复制这个问题，是的，我看起来第一个字母返回 false，我想这可能与 vue 的生命周期有关。您可以使用 v-text-field

的

@keyup

事件调用方法，而不是使用观察者

      <v-text-field
      v-model="input"      
      :rules="nameRules"               
      counter="10"
      required
      @keyup="logThis"
      ></v-text-field>

您尝试将验证规则配置为计算属性的方式对我来说有点奇怪。我通常像这样在 data 块中定义它们。

   data: () => (
     formValid: true,
     input: '',
     nameRules: [
         (v) => !!v || 'Name is required',
         (v) => (v && v.length <= 10) || 'Name must be less than 10 characters'
      ]
   ),

    methods: 
      submitForm() 
         if (this.$refs.testForm.validate()) 
            // Do something ...
         
      ,
      logThis()          
         console.log(this.formValid)
      
   ,

您还可以将 formValid 设置为 true 并使用 v-form 的 lazy-validation 属性。我还添加了一个提交按钮来触发表单的 validate() 方法。