如何在 vee-validate - 编程之家

如何解决如何在 vee-validate

我正在努力解决嵌套验证观察器的问题。提交表单后，我想 scrollIntoView 到有错误的元素。问题是在根验证观察者 refs 列表中我没有这个嵌套观察者中的元素。我如何才能到达它？

Vue：2.6.11 Vee验证：3.4.5

结构：

<ValidationObserver tag="form" ref="form">
  <ComponentA>
    <ValidationProvider vid="name1">
      <input>
    </ValidationProvider>
  </ComponentA>
  <ComponentB>
    <ValidationObserver ref="observer" slim>
      <ValidationProvider vid="name2">
        <input>
      </ValidationProvider>
      <ValidationProvider vid="name3">
        <input> HERE GOT ERROR
      </ValidationProvider>
    </ValidationObserver>
  <ComponentB>
</ValidationObserver>

因此在 refs 的 form 中我只能看到 name1，但我还需要引用 name2 中的元素。

JavaScript：

    const form = ref<InstanceType<typeof ValidationObserver>>();

    const getIdsWithError = () => {
      if (form.value?.fields) {
        return (Object.keys(form.value?.fields) as CONTRACT_FIELD_VID[]).filter(
          vid => form.value?.refs[vid]?.errors.length !== 0,);
      }
    };

    const scrolltoElement = (fieldId: CONTRACT_FIELD_VID) => {
      return form.value?.refs[fieldId]?.$el.scrollIntoView({
        behavior: 'smooth',block: 'center',});
    };
    
   // inside submit

   const vidsWithError = getIdsWithError();
   if (vidsWithError) {
        return scrolltoElement(vidsWithError[0]);
      }