Vue js getting an element within a component

Question

I have a component  how can I select one of its elements  I m trying to get an input that is within this component s template  There could be multiple components so the querySelector must only parse the current instance of the component  Vue component  somecomponent         template    somecomponent       props                      created  function             somevariablehere querySelector  input   focus

User · Accepted Answer

you can access the children of a vuejs component with this.$children. if you want to use the query selector on the current component instance then this.$el.querySelector(...)

just doing a simple console.log(this) will show you all the properties of a vue component instance.

additionally if you know the element you want to access in your component, you can add the v-el:uniquename directive to it and access it via this.$els.uniquename

User · Answer

Vue 2 x For Official information  https   vuejs org v2 guide migration html v-el-and-v-ref-replaced A simple Example  On any Element you have to add an attribute ref with a unique value  lt input ref  quot foo quot  type  quot text quot   gt   To target that elemet use this  refs foo this  refs foo focus       it will focus the input having ref  quot foo quot

User · Answer

In Vue2 be aware that you can access this  refs uniqueName only after mounting the component

User · Answer

Composition API Template refs section tells how this has been unified   within template  use ref  quot myEl quot    ref  with a v-for within script  have a const myEl   ref null  and expose it from setup  The reference carries the DOM element from mounting onwards

User · Answer

The answers are not making it clear   Use this  refs someName  but  in order to use it  you must add ref  someName  in the parent   See demo below    x000D   x000D  new Vue   x000D    el    app   x000D    mounted  function     x000D      var childSpanClassAttr   this  refs someName getAttribute  class    x000D       x000D      console log   lt span gt  was declared with  class  attr -- gt    childSpanClassAttr   x000D      x000D     x000D   lt script src  https   unpkg com vue 2 5 13 dist vue min js  gt  lt  script gt  x000D   x000D   lt div id  app  gt  x000D    Parent  x000D     lt span ref  someName  class  abc jkl xyz  gt Child Span lt  span gt  x000D   lt  div gt  x000D   x000D   x000D     refs  and v-for  Notice that when used in conjunction with v-for  the this  refs someName  will be an array    x000D   x000D  new Vue   x000D    el    app   x000D    data    x000D      ages   11  22  33  x000D       x000D    mounted  function     x000D      console log   lt span gt  one s text        this  refs mySpan 0  innerText   x000D      console log   lt span gt  two s text        this  refs mySpan 1  innerText   x000D      console log   lt span gt  three s text      this  refs mySpan 2  innerText   x000D      x000D     x000D  span   display  inline-block  border  1px solid red    x000D   lt script src  https   unpkg com vue 2 5 13 dist vue min js  gt  lt  script gt  x000D   x000D   lt div id  app  gt  x000D    Parent  x000D     lt div v-for  age in ages  gt  x000D       lt span ref  mySpan  gt Age is    age    lt  span gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

vuejs 2  v-el el uniquename has been replaced by ref  uniqueName   The element is then accessed through this  refs uniqueName

[javascript] Vue.js getting an element within a component

Examples related to javascript

Examples related to vue.js