DOM element to corresponding vue js component

Question

How can I find the vue js component corresponding to a DOM element  If I have element   document getElementById id    Is there a vue method equivalent to the jQuery   element

User · Answer

In Vue js 2 Inside a Vue Instance or Component   Use this  el to get the HTMLElement the instance component was mounted to  From an HTMLElement   Use    vue   from the HTMLElement  E g  var vueInstance   document getElementById  app     vue       Having a VNode in a variable called vnode you can   use vnode elm to get the element that VNode was rendered to use vnode context to get the VueComponent instance that VNode s component was declared  this usually returns the parent component  but may surprise you when using slots  use vnode componentInstance to get the Actual VueComponent instance that VNode is about  Source  literally  vue flow vnode js  Runnable Demo   x000D   x000D  Vue config productionTip   false     disable developer version warning console log  -------------------    Vue component  my-component       template    lt input gt      mounted  function         console log   my-component  is mounted at element    this  el            Vue directive  customdirective       bind  function  el  binding  vnode        console log   DIRECTIVE  My Element is    vnode elm       console log   DIRECTIVE  My componentInstance is    vnode componentInstance       console log   DIRECTIVE  My context is    vnode context          some properties  such as  el  may take an extra tick to be set  thus you need to        Vue nextTick      gt  console log   DIRECTIVE  AFTER TICK  My context is    vnode context  el           new Vue     el    app     mounted  function         console log   ROOT  This Vue instance is mounted at element    this  el            console log   ROOT  From the element to the Vue instance    document getElementById  app     vue         console log   ROOT  Vue component instance of my-component    document querySelector  input     vue            x000D   lt script src  https   unpkg com vue 2 5 15 dist vue min js  gt  lt  script gt    lt h1 gt Open the browser s console lt  h1 gt   lt div id  app  gt     lt my-component v-customdirective    gt  lt  my-component gt   lt  div gt  x000D   x000D   x000D

User · Answer

Since in Vue 2 0  no solution seems available  a clean solution that I found is to create a vue-id attribute  and also set it on the template  Then on created and beforeDestroy lifecycle these instances are updated on the global object   Basically   created  function         this  id   generateUid        globalRepo this  id    this      beforeDestroy  function         delete globalRepo this  id      data  function         return           vueId  this  id

User · Answer

this  el - points to the root element of the component this  refs  lt ref name gt     lt div ref   lt ref name gt       - points to nested element        use  el  refs only after mounted   step of vue lifecycle    lt template gt       lt div gt          root element          lt div ref  childElement  gt child element lt  div gt       lt  div gt   lt  template gt    lt script gt      export default           mounted                 let rootElement   this  el              let childElement   this  refs childElement               console log rootElement               console log childElement                    lt  script gt    lt style scoped gt   lt  style gt

User · Answer

So I figured  0   vue   doesn t work very well with HOCs  high order components       ListItem vue  lt template gt       lt vm-product-item  gt   lt template gt    From the template above  if you have ListItem component  that has ProductItem as it s root  and you try  0   vue   in console the result unexpectedly would be the ListItem instance    Here I got a solution to select the lowest level component  ProductItem in this case    Plugin     DomNodeToComponent js export default     install   Vue  options    gt        Vue mixin         mounted              this  el   vueComponent     this                          Install  import DomNodeToComponent from   plugins DomNodeToComponent DomNodeToComponent  Vue use DomNodeToComponent    Use   In browser console click on dom element  Type  0   vueComponent    Do whatever you want with component  Access data  Do changes  Run exposed methods from e2e    Bonus feature  If you want more  you can just use  0   vue    parent  Meaning if 3 components share the same dom node  you ll have to write  0   vue    parent  parent to get the main component  This approach is less laconic  but gives better control

User · Answer

I found this snippet here  The idea is to go up the DOM node hierarchy until a   vue   property is found   function getVueFromElement el      while  el        if  el   vue            return el   vue         else         el   el parentNode               In Chrome

User · Answer

The proper way to do with would be to use the v-el directive to give it a reference  Then you can do this    reference    Update for vue 2  In Vue 2 refs are used for both elements and components  http   vuejs org guide migration html v-el-and-v-ref-replaced

User · Answer

Just by this  in your method in  methods     element   this  el

User · Answer

If you want listen an event  i e OnClick  on an input with  demo  id  you can use   new Vue     el    demo     data        n  0        methods       onClick  function  e         console log e target tagName      A       console log e targetVM     this     true

User · Answer

If you re starting with a DOM element  check for a   vue   property on that element  Any Vue View Models  components  VMs created by v-repeat usage  will have this property   You can use the  Inspect Element  feature in your browsers developer console  at least in Firefox and Chrome  to view the DOM properties   Hope that helps

User · Answer

Since v-ref is no longer a directive  but a special attribute  it can also be dynamically defined  This is especially useful in combination with v-for    For example    lt ul gt       lt li v-for   item  key  in items  v-on click  play item  event   gt           lt a v-bind ref   key    item id  v-bind href  item url  gt               lt  -- content -- gt           lt  a gt       lt  li gt   lt  ul gt    and in Vue component you can use   var recordingModel   new Vue     el   rec-container     data       items            methods       play function key e            it contains the bound reference       console log this  refs  item  key

User · Answer

Exactly what Kamil said    element   this  el   But make sure you don t have fragment instances

[javascript] DOM element to corresponding vue.js component

Runnable Demo:

Examples related to javascript

Examples related to dom

Examples related to vue.js