# Best practices about loading tabs elements/inputs

**URL:** <https://community.weweb.io/t/best-practices-about-loading-tabs-elements-inputs/2267>\
**Category:** Tips and Hacks\
**Tags:** binding\
**Created:** [April 13, 2023, 10:21am UTC](https://community.weweb.io/t/best-practices-about-loading-tabs-elements-inputs/2267 "2023-04-13T10:21:37Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![AmbroiseDhenain](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/ambroisedhenain/32/2609_2.png) [@AmbroiseDhenain](https://community.weweb.io/u/AmbroiseDhenain)\
**Post date:** [April 13, 2023, 10:21am UTC](https://community.weweb.io/t/best-practices-about-loading-tabs-elements-inputs/2267/1 "2023-04-13T10:21:37Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Quentin](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/quentin/32/6_2.png) [@Quentin](https://community.weweb.io/u/Quentin)\
**Post date:** [April 19, 2023, 3:37pm UTC](https://community.weweb.io/t/best-practices-about-loading-tabs-elements-inputs/2267/2 "2023-04-19T15:37:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [April 19, 2023, 3:55pm UTC](https://community.weweb.io/t/best-practices-about-loading-tabs-elements-inputs/2267/3 "2023-04-19T15:55:48Z")

</div>

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