Vue.js best practice to remove component | vue destroy component
Thereisadestroycommandtoerasecomponents:Completelydestroyavm.Cleanupitsconnectionswithotherexistingvms,unbindallitsdirectives,turnoffalleventlisteners.TriggersthebeforeDestroyanddestroyedhooks.https://vuejs.org/v2/api/#vm-destroy[1]Butifyouonlywanttheremove/hidethecomponents,whichareinsideofoneormanyinstances(i.e.theonesthataremountedvia.$mount()orel:"#app")youshouldtrytoremovethecomponentsviav-iforhideviav-show.Intheinstancetemplatethiswilllooklike:
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://vuejs.org/v2/api/#vm-destroy[1]
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://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show[2]
References https://vuejs.org/v2/api/#vm-destroy (vuejs.org) https://vuejs.org/v2/...