[Vuejs]-Access dom element with vuejs and vuetify in v-tabs

by

0👍

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

0👍

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.

Leave a comment