Best practices about loading tabs elements/inputs

When using tabs, the inputs own “Init value” is not loaded unless the tab is loaded.

This caused me some headaches when I had some calculations from tab#3 based on tab#2 inputs, which are themselves using “Init value” from the database. As I want to use the input’s value if present, it made things a bit harder to design properly.

Eventually, I used a hack where I created a workflow that loads all tabs and goes back to the first tab.
Another alternative is to build a “take input value first, if undefined then use database value”, but that was more work in my case. (although cleaner)

How do you deal with that edge case?

Tagging @aurelie here, as she’ll be able to answer this better than me :stuck_out_tongue:

1 Like

When using an element variable, the variable is not existing until the element is mounted on the page.
The initial value is the value the variable is taking at creation.
When a component is inside a tab, then the variable associated is not existing (same for modal, or any component with a conditional display).

If your logic is depending on a data you could either

  • Fallback to the default value if the variable is not existing
  • Use an other variable and synchronise it with the “onUpdate” workflow
  • Do not put your input behind a “v-if”/conditional display
1 Like