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:
do I need to destroy those components? If YES: how?
Is there any better solution to this approach?
2 Answers
Answers 1
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; } } }) Answers 2
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
But if you only want the remove/hide the components, which are inside of one ore many instances (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-ifwill remove the component from the DOM in the same way as $destory() does. https://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show
0 comments:
Post a Comment