Is there any way to unmount vuejs Instance from DOM?
I want to mount and unmount the Vue instance for suited condition.
There is an vm.unmount() method on Vue 3 instance. If you are using Vue 2 you can use vm.$destroy().
If you are using file template you can use v-if condition on your component. That will remove element from DOM based on condition.
#gurkan-ugurlu third option works well.
My requirement was to mount and unmount the Vue instance. but it turns out, it was to render the DOM element for the suited condition for that template condition works well.
by searching, I understood that template conditions like if-else actually render the component. it's not like applying CSS property display: none;
Related
I use document.getElementById in beforeDestroy lifecycle to get an element. But getElementById returns null. If I use ref, I can get the element. Is there any difference between them? Why document.getElementById can't get the element?
There is an issue with the timing and there could be many reasons for that.
But in your case , The ref was still in the virtual DOM object, which will be destroyed within the destroy event (Unlike the document template).
That would be one reason Vue recommends to use $refs if possible.
I had the same problem. I thought the beforeDestroy hook was the right place to kill event listeners before leaving the component. For my surprise, when the route changes, the component is already unmounted when this hook is called.
This is vue.js version 2, I don’t know if it is better in version 3.
I have a div tag with an 'id="meet"' into v-tabs.
I need to access the node of this tag after I click a tab. I am using
let node=document.querySelector("#meet").
My problem is that it always returns "null". Here is the codepen: https://codepen.io/luizalves/pen/WNrepxz
What is wrong here?
There is no guarantee that after $nextTick you will see DOM element immediately.
<div id="meet"></div>
<button #click="onTest">test</button>
...
methods: {
onTest () {
let node=document.querySelector("#meet");
console.log('meet here',node)
},
After you clicked test you'll see in a console:
"meet here" "<div id='meet'></div>"
You can try to extract this div with an unique id into a separate component and inside it you can use mounted hook to know that it exists in DOM
Of course, according to vuetify docs, you may add eager prop to v-tab-item component, and that's it, but...possibly you are doing something wrong.
It's not a good idea to always add this prop because you are losing one of the vuetify 2.X advantages - lazy loading. This may lead to big performance problems if there are many elements on the tab.
Maybe it would be better if you will work directly with reactive variables (like variables in v-model directive), not DOM objects.
Here is an example from some tutorial:
<p id="p">Example: <i>italic</i> and <b>bold</b></p>
<script>
let range = new Range();
range.setStart(p.firstChild, 2);
range.setEnd(p.querySelector('b').firstChild, 3);
alert(range); // ample: italic and bol
// use this range for selection (explained later)
window.getSelection().addRange(range);
</script>
How to do this with vue?
Should I use query selectors too?
I am interested how to do this selection manipulation within contenteditable. I can use "ref" for contenteditable container but inner content with bold, italic etc. tags is dynamic and mark this code with refs:
... <b><i>some text</i></b> ...
isn't appropriate.
If you're using the Selection API to manipulate the DOM (not just creating ranges, but adding/removing/modifing/reordering DOM nodes), then you should be doing those manipulations on DOM elements not managed by Vue. You must not modify parts of the DOM managed by Vue because Vue won't know about those changes and it will get confused when trying to patch the DOM during the next render cycle. Vue "owns" the rendered DOM of its components.
This doesn't mean you can't use the Selection API and Vue together, it just means you need to be careful not to tinker in the DOM willy-nilly.
Should I use query selectors too? Using p.querySelector('b').firstChild isn't vue way but I don't know what should I use insted
This rule only applies if you want to get a reference to a DOM node rendered by Vue. If the container were content editable, then its contents would not be managed by Vue and you would have no way of referencing its contents without using querySelector and other DOM functions. Try not to get caught up with "am I doing it the Vue-way?" when what you are trying to do is inherently not Vue related anyway.
I wonder how can I achieve a simple tooltip component in Vue?
What I try to do is: Hover on element, a component tag will be appended.
I do not know how to compile/render that component into DOM after I append it using jquery. In Angular, this can be achieved by using $compile
This way to implement tooltip may not be a good practice, but I just wonder how to achieve.
Thanks,
I have a v-if on a tag <span v-if="someValue"> which I want to start hidden and only become visible once the value in someValue is set to true. Unfortunately even if the value false from the start it still flashes up when loading the page (probably before Vue has time to remove the tag).
Is there a nice way to deal with this issue?
The initial "flashing" is not actually related to the v-if.
It is due to the fact that you first load the dom and then vue js will "manipulate" it. Vue is loaded after your html markup and therefore you will see everything until vue js is finally loaded and will hide elements according to your code.
To get rid of this you can place a v-cloak directive on one of your outer elements and add a css like
[v-cloak].class-of-my-outer-element {
display: none;
}
the v-cloak "attribute" will be removed by vue after it is initialized. that means nothing is shown until your code is ready.
Minor update / edit : Don't forget the v-cloak element needs to be inside if your #app or whereever you mount your vue application.