CODEWITHSUNDEEP
vue.js
clod986
clod986

Reputation: 2647

Vue.js best practice to remove component

My website overwrites a specific DOM instead of asking for a page load. Sometimes, inside the DOM there will be some Vue.js components (all are single page components), which will be overwritten. Most of them reside in an app created for the sole purpose of building the component.

Two questions:

  1. do I need to destroy those components? If YES: how?

  2. Is there any better solution to this approach?

Upvotes: 9

Views: 40635

Answers (3)

KushalSeth
KushalSeth

Reputation: 4649

v-if can be used for this purpose. but if you are playing with parent child components, then it can be a bit tricky.

So, when your parent load, hide your child using v-if and pass the props to show or hide the child component.

In my parent component: hideStudentSection is passed as props. and one event named navToParent passed. navToParent will be used to reset the props when call comes back from child component.

  <div class="container-fluid" v-if="nav.students">
    <div class="row">
        <students
          @navToParent="navToParent"
          :hideStudentSection="nav.hideStudentSection"
        />
    </div>
    <div @click="navToChild"> </div>
  </div>
export default defineComponent({
...
method() {
   navToChild() {
      this.nav.hideStudentSection = false;
      this.nav.students = true;
   },
   navToParent() {
      this.nav.hideStudentSection = true;
      this.nav.students = false;      
   }
}
})

In my child component: (note: I am showing only the relevant code). you can use mounted to handle your stuff

<template>
  <div class="col-12" v-if="!hideStudentSection">
  </div>
<div @click="back">back to Parent</div>
</template>

export default defineComponent({
...
...
props: ["hideStudentSection"],
emits: ["navToParent"],
mounted() { 
  // use mounted to handle your stuff
},
methods: {
    back() {
      this.$emit("navToParent");
    },
}
});

Upvotes: 0

reinerBa
reinerBa

Reputation: 1660

There is a destroy command to erase components:

Completely destroy a vm. Clean up its connections with other existing vms, unbind all its directives, turn off all event listeners. Triggers the beforeDestroy and destroyed hooks.

https://v2.vuejs.org/v2/api/#vm-destroy

But if you only want the remove/hide the components, which are inside of one or many instances (i.e. the ones that are mounted via .$mount() or el: "#app" ) you should try to remove the components via v-if or hide via v-show.

In the instance template this will look like:

<my-component v-if="showMyComponent"></my-component>
<my-component v-show="showMyComponent"></my-component>

The v-show will just set display:none while v-if will remove the component from the DOM in the same way as $destroy() does. https://v2.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

Upvotes: 11

drch
drch

Reputation: 144

You must use a local data prop and use in in directives v-show and v-if

<div id="application">
    <vm-test v-if="active"></vm-test>
    <div @click="toggle()">toggle</div>
</div>

Vue.component('vm-test', {
    template: '<div>test</div>'
});

var vm = new Vue ({
    el: "#application",
    data: function() {
        return {
            active:true
        }
    },
    methods: {
        toggle: function() {
            this.active = !this.active;
        }
    }
})

https://jsfiddle.net/99yxdacy/2/

Upvotes: 3

Related Questions