VueJS find element by key

The purpose of key is not selecting element. Even if it can be done, don't do it.

The proper way to do it is by using ref.

for example, add ref attribute to your html like this

v-for="(apk, index) in project.apks" v-bind:key="index" :ref="'sample-ref-'+index"

and then in your methods, you can get the DOM using this.$refs['sample-ref-0'],this.$refs['sample-ref-1'] and so on.

Hope this helps.


something like this could allow you to find a component by key :

this.$children.forEach(child=>{
 print("child.$vnode.key")
})

also use mounted , as it gets called when the component is added to the dom:

mounted:function(){
this.$el.querySelector("#ele1")...
}

I found that if you give the 'ref' the same name in a v-for, like this:

<div v-for="data in list" :key="data.id" ref="bar"></div>

Then you will find they just store in an array called 'bar' and you can visit them by:

this.$refs['bar'][index]

Tags:

Vue.Js