Vue Component Functionality with Conditional Rendering

Question

I have a vue component called <PlanView/>, and I'm rendering this component conditionally:

<div v-if="show_plan" id="mainplan">
  <PlanView/>
</div>
<div class="icon" v-else>
  <font-awesome-icon icon="fa-solid fa-angles-right" @click="openPlan"/>
</div>

openPlan() {
    this.show_plan = true;
},

but I want the functionality to be called even if the component is not rendered, can you please advise me how can I do that? thanks in advance.

What do you mean by calling the functionality without rendering component? — Nitheesh
– Nitheesh, Commented Jan 9, 2023 at 14:42
@Nitheesh 'calling the functionality' in my case is to call the sub-components without parsing them on the GUI. — Bilal
– Bilal, Commented Jan 9, 2023 at 14:44
what does this "functionality" refer to? I mean reading your code, I can understand that it will show the icon if show_plan === false and show the PlantView if show_plan === true, and that if you click the icon it will show the component, but what exactly do you want here? can you explain more? — Damzaky
– Damzaky, Commented Jan 9, 2023 at 14:48
Could you please describe calling the sub-components more detailed? Your code is not full enough to understand your problem. — Tolbxela
– Tolbxela, Commented Jan 9, 2023 at 14:49

Nitheesh · Accepted Answer · 2023-01-10 09:26:09Z

1

If you want the component to be renedered and not displayed, you can hide the visibility of the template inside the component rather than hiding the complete compoenent.

Pass a prop to PlanView to decide the template is to be rendered or not

<PlanView :showPlan="show_plan"/>

Accept the prop inside PlanView component like

defineProps({
    showPlan: {
        type: Boolean,
        required: false,
        default: false
    }
})

Render the template of PlanView only if the prop is satisfied. So the template of PlanView will be looking like

<template>
    <!-- Div or some wraper element -->
    <div v-if="showPlan"> 
        <!-- Rest of your template here -->
    </div>
</template>

OR

Simply use v-show on the wrapper so that the element will be loaded, but will not be displayed in the UI when the condition is false

<PlanView v-show="show_plan"/>

edited Jan 10, 2023 at 9:26

answered Jan 9, 2023 at 14:49

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

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

1 Comment

Damzaky Over a year ago

for this use case, I think it's better to just use <PlantView v-show="show_plan"> imo

Tolbxela · Accepted Answer · 2023-01-09 14:54:59Z

1

You can simply use v-show instead of v-if to provide the same functionality as the answer from @Nitheesh suggests.

<div v-show="show_plan" id="mainplan">
  <PlanView/>
</div>
<div v-show="!show_plan" class="icon">
  <font-awesome-icon icon="fa-solid fa-angles-right" @click="openPlan"/>
</div>

But I am not sure this is what you means by by calling the functionality.

answered Jan 9, 2023 at 14:54

Tolbxela

5,2193 gold badges23 silver badges52 bronze badges

Collectives™ on Stack Overflow

Vue Component Functionality with Conditional Rendering

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related