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

我正在为私人银行帐户开发一个帐簿，目前我正在研究存款人表格部分，用户可以在其中添加新的存款人。每个存款人都必须有一个姓名和至少一个银行帐户才能提交存款人表格并返回到account-view-component。

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

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

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

我进行了一些测试，可以确定只有在没有其他帐户创建的情况下，通过单击“ 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函数中，因为它需要一个模型...并且这解决了您提到的问题：

仅当在尚未创建其他帐户的情况下通过单击“ x”按钮放弃帐户草稿时，才会发生错误

为什么审核验证器不再对输入更改做出反应？

1 个答案: