Vee-validate: Do not merge errors of nested observers

[schmulschubiak]

In version 3.2.0 @logaretm introduced the new feature #2530 (imho. maybe a breaking change?), "merge nested observer errors instead of nesting".

Nesting the errors had a big advantage in the past. If nested observers had the property "vid", the parent observer knew which child observer has errors, which is very helpful if you have to show error indicators (icons etc.) outside the nested observers, mostly in usecase where you use slots like in tab-panes etc. and would indicate errors in tab-pane-titles.

Can we rollback the old behavior or implement a switch or a convenience method?

[logaretm]

Unlikely, because you should use each observer's slot props to show such indicators, not their parent one.

[netzfluencer]

@logaretm i would like this too, like @schmulschubiak mentioned.

In my case i have a tab paned form too.

<validation-observer>
  // Pane 1
  <validation-observer>
     [...providers]
  </validation-observer>

  // Pane 2
  <validation-observer>
     [...providers]
  </validation-observer>

   // Pane 3
  <validation-observer>
     [...providers]
  </validation-observer>
  ...

  // Footerbar which is sticked at the bottom of the screen
  <footer>
      [...pane-indications]
      [...button] -> switches to the next pane and shall only be clickable when current and previous panes have no validation-rule breaks
  </footer
</validation-observer>

[netzfluencer]

I think it would help and fit in this case to make the observers data key available in the Scoped Slot Props of the <validation-observer> component. What do you think? @logaretm

[logaretm]

@netzfluencer I don't think you need nested observers to achieve that, since 1 pane can only be visible at a time.

I can acheive the same effect like this:

<validation-observer>
  // Pane 1
  <template v-if="pane === 1">
     [...providers]
  </template>

  // Pane 2
  <template v-if="pane === 2">
     [...providers]
  </template>

   // Pane 3
  <template v-if="pane === 3">
     [...providers]
  </template>
  ...


  <footer>
      [...pane-indications]
      [...button] 
  </footer
</validation-observer>

And before moving to either panes you could check the validation status of the validation observer, you don't need nested ones.

[netzfluencer]

@logaretm thank you for your answere. :)

yes i was thinking about using v-show, but yes for now using v-if is my current implementation too. :)

None the less the observers as slot props would be helpful too show checkmark indications on the [...pane-indications]. But this is aswell solveable without that prop.