vue.js - Vuetify/嵌套验证

Question

我正在看CRUD操作的vuetify表示例。这里是一个codepen:
https://codepen.io/uglyhobbitfeet/pen/oNvKaaL

我添加了一个环绕表格和另一个组件的父窗体。它验证该表具有多于0行，并在用户单击“继续”按钮之前验证其他组件。

在提供的代码笔中，当用户单击“新建项”按钮(位于表的右上方)时，我想先验证弹出的字段，然后用户才能将数据“保存”到表中。怎么办？我曾尝试将v-对话框与父窗体包装在单独的v-窗体中，但是我无法使其正常工作，而且我不确定嵌套窗体是否可行。有什么建议么？

由于SO需要在提供Codepen链接时发布代码，因此以下是一小段代码。

<v-data-table
  :headers="headers"
  :items="desserts"
  sort-by="calories"
  class="elevation-1"
>

Answer 1

reassignFormInputs(form) {
  const inputs = [];
  // Copied from VForm's previous life* which had a getInputs() function
  const search = (children, depth = 0) => {
    for (let index = 0; index < children.length; index++) {
      const child = children[index];
      if (child.errorBucket !== undefined) inputs.push(child);
      else search(child.$children, depth + 1);
    }
    if (depth === 0) return inputs;
  };
  search(form.$children);
  form.inputs = inputs;
},
saveForm() {
  this.reassignFormInputs(this.$refs.form);

  if (this.valid) {
    console.log(this.lessonPlanData);
  } else {
    this.$refs.form.validate();
  }
},

将您的子组件分配给父输入。

资料来源: https://github.com/vuetifyjs/vuetify/issues/4900#issuecomment-423600028