Vue.js VueJS按键查找元素

Vue.js VueJS按键查找元素,vue.js,Vue.js,我只是想知道是否可以通过vue的key属性找到DOM元素? 我目前正在处理一个列表。我通过div上的v-for指令显示它。我将键与元素的索引绑定 v-for="(apk, index) in project.apks" v-bind:key="index" 如果我能在从我的服务器获取并显示这些元素后立即为它们计算出一些东西,这将对我非常有帮助。它只是解析一个文件并查找关键字,然后相应地为项目选择一个css类 问题是,我不知道如何在这些元素添加到DOM后立即为它们调用方法。它们有很多html事件

我只是想知道是否可以通过vue的key属性找到DOM元素? 我目前正在处理一个列表。我通过div上的v-for指令显示它。我将键与元素的索引绑定

v-for="(apk, index) in project.apks" v-bind:key="index"
如果我能在从我的服务器获取并显示这些元素后立即为它们计算出一些东西,这将对我非常有帮助。它只是解析一个文件并查找关键字,然后相应地为项目选择一个css类


问题是,我不知道如何在这些元素添加到DOM后立即为它们调用方法。它们有很多html事件,但我找不到一个表示插入dom的对象的事件:(

键的目的不是选择元素。即使可以,也不要这样做

正确的方法是使用

例如,向html添加
ref
属性,如下所示

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

然后在方法中,您可以使用
this.$refs['sample-ref-0']
this.$refs['sample-ref-1']
等等来获取DOM

希望这有帮助

问题是,我不知道如何在这些元素添加到DOM后立即为它们调用方法。它们有很多html事件,但我找不到一个代表插入DOM的对象的事件:(

您可以使用
v-for
创建一个新组件,只需调用挂钩即可


例子 主函数上的
/**/
/*在“apk”组件上*/
导出默认值{
道具:[“数据”],
创建(){
log(“已创建!”);
}
}

类似的内容可以让您按键查找组件:

this.$children.forEach(child=>{
 print("child.$vnode.key")
})
还可以使用mounted,因为在将组件添加到dom时会调用它:

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

我发现如果你在v-for中给“ref”起了相同的名字,比如:

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

Ho,你在我之前就已经响应了,如果OP想测试它,这里有一个JSFIDLE:谢谢,我差点就这么做了。我使用了:id=“'apk'+index”,我假设这是一样的。我可以在服务器获取后获取元素(有一个超时,这样vue就有时间在添加css类之前将它们添加到DOM中),使用for-loop document.getElementById('apk'+I)并完成我的工作如果您在
v-for
中使用
:ref
,ref将存储为数组,因此我认为,即使您为每个项目使用唯一的标签,最终也会得到一组单元素数组,因此需要
这个。$refs['sample-ref-0'][0]
?@patricksurry不。它不是一堆单元素数组。你可以试试。嗯,我做了
我的
这个。$refs
作为一个对象,每个键指向一个带有一个项的数组。这是
vue@2.5.16
哦,谢谢,这真是太聪明了。可惜没有创建html e我们可以在vue中使用的通风方式是:@created=“doStuff(index)”实际上,您可以在apk元素的已创建钩子中发出cutom事件:
this.$emit('created')
,并像上面描述的那样捕捉它。
<div v-for="data in list" :key="data.id" ref="bar"></div>
this.$refs['bar'][index]