performance issue with vue.js condition

Question

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>


**if I am using two conditions in this way then I am getting two output at one if i am fiving two different name also. How to solve this if i will select "schema_Real_Estate" then regarding this i want to print the out put and If i will select "rent" Then only rent out put should appear but in my case both are displayeing at one if i will select any of them **
get schema_Real_Estate(){
    return [
        'Real Estate | Single Family Homes',
        'Real Estate | Town Homes',
        'Real Estate | Condominiums',
        'Real Estate | Multi Family',
        'Real Estate | Mobile Homes',
        'Real Estate | Farm/Ranch Land',
        'Real Estate | Commercial Property',
        'Real Estate | Foreclosures',
        'Real Estate | Storage',
        'Real Estate | Vacation Property',
        'Real Estate | Open Houses',
        'Real Estate | Other Properties',
    ].includes('category')
},
    get rent(){
    return [
        'Rent | Apartments',
        'Rent | Houses',
        'Rent | Room for Rent',
        'Rent | Vacation Rentals',
        'Rent | Commercial',
        'Rent | Garages',
        'Rent | Other Rentals',
        'Rent | Roommates',
        'Rent | Storage',
        'Rent | Mobile Homes',
    ].includes('category')
},

you can compare the behavior and see when you have one condition how much time its taking to load, and when you didn't keep any condition how much time its taking to load when you keep all these conditions hw much time its taking to load. Ideally these conditions wont be making any performance glitches, it could be from the vue-form-g — Tony Tom
– Tony Tom, Commented Apr 27, 2021 at 16:29

stackoverfloweth · Accepted Answer · 2021-04-27 17:51:30Z

1

well for sure there is a getter way to check that condition. I would suggest pulling that into your script section

get condition(){
    return [
        'Real Estate | Single Family Homes',
        'Real Estate | Town Homes',
        'Real Estate | Condominiums',
        'Real Estate | Multi Family',
        'Real Estate | Mobile Homes',
        'Real Estate | Farm/Ranch Land',
        'Real Estate | Commercial Property',
        'Real Estate | Foreclosures',
        'Real Estate | Storage',
        'Real Estate | Vacation Property',
        'Real Estate | Open Houses',
        'Real Estate | Other Properties',
    ].includes(category)
}

then in your template v-if="condition"

also, choose a more descriptive term than "condition"

answered Apr 27, 2021 at 17:51

stackoverfloweth

6,9275 gold badges44 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Salima Over a year ago

thanks sir for providing me a solution. I have on doubt here I have one more v-if condition "v-if="(category == 'Antiques') || (category == 'Antiques | Collectibles')". Should I have to add this by separating with comma or inside that return object

Salima Over a year ago

Hi sir. By using above code I am facing "category is not define error". How to solve this

stackoverfloweth Over a year ago

@sultan sorry, I see that in your example category was just a string? If that's not a variable than aren't these conditions static?

Collectives™ on Stack Overflow

performance issue with vue.js condition

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related