DEV Community

Alam487
Alam487

Posted on

1 1

performance issue with vue.js v-if condition

Here I am using vue form generator. Here my question is I have written v-if condition for many categories. In the same way I have many vue form generator component where I have written v-if condition. So I am facing performance issue here. So my question is if we are writing such condition like this. so this could be the reason for performance or anything else.

<div v-if="(category == 'Real Estate | Single Family Homes')||(category == 'Real Estate | Town Homes')||(category == 'Real Estate | Condominiums')||(category == 'Real Estate | Multi Family')||(category == 'Real Estate | Mobile Homes')||(category == 'Real Estate | Farm/Ranch Land')||(category == 'Real Estate | Commercial Property')||(category == 'Real Estate | Foreclosures')||(category == 'Real Estate | Storage')||(category == 'Real Estate | Vacation Property')||(category == 'Real Estate | Open Houses')||(category == 'Real Estate | Other Properties')">

<vue-form-g :schema="schema_Real_Estate" :model="model" :options="formOptions"></vue-form-g>

<span class="prev_next">
<button class="prev_next_btn" @click.prevent="prev()">Previous</button>
<button style="background-color:lightgray;" class="prev_next_btn" @click.prevent="next(2)">Next</button>
</span>
</div>
Enter fullscreen mode Exit fullscreen mode

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (1)

Collapse
 
cwinter profile image
Christopher Winter

Not sure why exactly there would be a performance issue with that but I would definitely add all that to an array and do a v-if="validCategories.includes(category)" to make it more clean or .indexOf(category) !== -1 or even your own function that will do partial matches just looking for "Real Estate" if that is what you're actually looking for.

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay