为什么 vuelidate 验证器不再对输入变化做出反应？

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://")

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

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

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

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

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

现在，如果你想帮助我，我请你重现 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

为什么 vuelidate 验证器不再对输入变化做出反应？

Why do vuelidate validators no longer react to input changes?

javascript

vue.js

validation

vuelidate