Vue Component Functionality with Conditional Rendering-CodePudding

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

<div v-if="show_plan" id="mainplan">
  <PlanView/>
</div>
<div  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.

CodePudding user response：

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>

CodePudding user response：

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" >
  <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.