javascript - 为什么 vuelidate 验证器不再对输入变化使用react？

Question

我在使用 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://")

我正在为私有(private)银行账户开发一个账簿，目前我正在开发 depositor-form-component，用户可以在其中添加新的存款人。每个存款人必须有姓名和至少一个银行账户才能提交存款人表格并返回到账户查看组件。

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

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

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

我做了一些测试，可以确定只有在没有创建其他帐户的情况下通过单击“x”按钮丢弃帐户草稿时才会发生错误。一旦至少创建了一个帐户并在下拉列表中可用，一切都会按预期进行，并且验证器会在起草另一个帐户时对输入更改使用react。

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

提前致谢，祝您有愉快的一天😊

Answer 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 函数中，因为它需要一个...这解决了您提到的问题:

error only occurs, when an account-draft is discarded by clicking the „x“-button while no other accounts are already created