为啥 vuelidate 验证器不再对输入更改做出反应？

Posted 2023-05-09

【中文标题】为啥 vuelidate 验证器不再对输入更改做出反应？

【英文标题】：Why do vuelidate validators no longer react to input changes?为什么 vuelidate 验证器不再对输入更改做出反应？

【发布时间】：2020-12-12 05:39:18

【问题描述】：

我在使用 vuelidate 进行表单验证时遇到问题。我正在使用 Vue 2.9.6 和 Vuelidate 0.7.5

我建议在阅读我的问题描述时打开这个 jsfiddle：

jsfiddle.net/Philgarth/h5v7km2s/
(SO prevents me from posting the link properly, sorry .... just prepend "https://")

我正在为私人银行账户开发账户簿，目前我正在开发存款人表单组件，用户可以在其中添加新存款人。每个存款人必须有一个姓名和至少一个银行账户才能提交存款人表格并返回到帐户视图组件。

正如您在 jsfiddle 中看到的，我有一个用于名称的文本字段和一个用于初始为空且已禁用的帐户的下拉列表。可以通过单击下拉菜单旁边的“+”按钮来起草一个新帐户。对于“草稿”，我的意思是，完成的应用程序中的帐户不应该立即发布到数据库中。因为用户应该能够为一个存款人创建多个账户，所以只有通过提交整个存款人表单才能将完成且经过验证的具有一个或多个账户的存款人对象发送到数据库。

在起草新帐户时，变量“pendingAccountCreation”设置为 true，这就是为什么通过“v-if”以及两个按钮来提交或丢弃帐户数据来显示帐户字段的原因。 当点击这些按钮中的任何一个时，验证对象“updatedAccount”应该被重置，这样通过起草另一个帐户，字段既不脏也不出错。

现在的问题是，在某些情况下，验证器不会对输入字段的更改做出反应——例如尽管输入字段不为空，“required”仍然为 false。

我进行了一些测试，可以确定该错误仅发生在通过单击“x”按钮丢弃帐户草稿而尚未创建其他帐户时。只要创建了至少一个帐户并在下拉列表中可用，一切都会按预期工作，并且验证者在起草另一个帐户时会对输入更改做出反应。

现在，如果您想帮助我，我请您重现 jsfiddle 中的错误并尝试找出我在这里做错了什么。

提前致谢，祝你有美好的一天？？？？

【问题讨论】：

只是备注，没有vue版本2.9.6

【参考方案1】：

更改此代码：

discardAccountDraft(accountValidator) 
      accountValidator.$reset();

      this.selectedAccountIndex = 0;

      if (this.updatedDepositor.accounts.length !== 0) 
        this.selectedAccount = this.updatedDepositor.accounts[0];

        this.updatedAccount = this.cloneObject(this.selectedAccount);
       else 
        this.updatedAccount = this.cloneObjectModel;
      

      this.pendingAccountCreation = false;
    ,

到这个代码（jsfiddle）：

discardAccountDraft(accountValidator) 
      accountValidator.$reset();

      this.selectedAccountIndex = 0;

      if (this.updatedDepositor.accounts.length !== 0) 
        this.selectedAccount = this.updatedDepositor.accounts[0];

        this.updatedAccount = this.cloneObject(this.selectedAccount);
       else 
        this.updatedAccount = this.cloneObjectModel(
          id: "",
          accountNumber: "",
          iban: "",
          bic: "",
          accountDescription: "",
        );
      

      this.pendingAccountCreation = false;
    ,

我刚刚将空模型添加到您的 cloneObjectModel 函数中，因为它需要一个...这解决了您提到的问题：

只有在没有创建其他帐户的情况下单击“x”按钮放弃帐户草稿时才会发生错误

【讨论】：

嗨 Anton，好久不见了 :D 非常感谢！