VueJS按键查找元素

Posted 2021-03-30

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

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

如果我可以从服务器中获取并显示这些元素的每一个，那么这对我有用。它只是解析文件并查找关键字，并相应地为项目选择一个css类。

问题是我不知道如何在将这些元素添加到DOM时为每个元素调用方法。他们是很多html事件，但我找不到一个代表插入到dom的对象:(

答案

问题是我不知道如何在将这些元素添加到DOM时为每个元素调用方法。他们是很多html事件，但我找不到一个代表插入到dom的对象:(

您可以使用v-for创建一个新组件，然后调用created()钩子。

---

例

/* On your main function */
<div v-for="apk in project.apks">
    <apk :data="apk"></apk>
</div>

/* On your 'apk' component */
export default {
    props: [ "data" ],
    created() {
        console.log("Created !");
    }
}

另一答案

key的目的不是选择元素。即使可以做到，也不要这样做。

正确的方法是使用ref。

例如，像这样将ref属性添加到你的html

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。

希望这可以帮助。

另一答案

这样的事情可以让你按键找到一个组件：

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

也可以使用mount，因为当组件被添加到dom时它被调用：

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