VueJS 按键查找元素答案

【问题标题】：VueJS find element by keyVueJS 按键查找元素
【发布时间】：2018-08-21 11:41:44
【问题描述】：

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

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

如果我能在这些元素从我的服务器获取并显示出来后立即为它们计算一些东西，那真的会对我有所帮助。它只是解析一个文件并寻找关键字，并相应地为项目选择一个 css 类。

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

【问题讨论】：

标签： vue.js

【解决方案1】：

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。

希望这会有所帮助。

【讨论】：

嗬，你在我之前回复了，如果 OP 想要测试它，这里是一个 JSFiddle：jsfiddle.net/qg5rjp2j/11
谢谢，我几乎做到了。我使用了 :id=" 'apk' + index "，我认为它是相同的。我可以使用 for loop document.getElementById('apk' + i) 获取服务器获取后的元素（超时，因此 vue 有时间在添加 css 类之前将它们添加到 DOM）并做我的事情。 ;)
如果您在v-for 中使用:ref，则引用存储为数组，所以我认为即使您为每个项目使用唯一标签，您最终也会得到一堆一个元素数组，所以需要this.$refs['sample-ref-0'][0]?
@patricksurry 不。它不会是一堆单元素数组。你可以试试看。
嗯，我做了<div v-for="e in session.events" :key="e.id" :ref="'event-' + e.id">...，我的this.$refs 最终成为一个对象，每个键都指向一个包含一个项目的数组。这是vue@2.5.16

【解决方案2】：

问题是我不知道如何在将这些元素添加到 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 !");
    }
}

【讨论】：

哦，谢谢，这实际上很聪明。太糟糕了，虽然没有一个可以与 vue 一起使用的 created html 事件：@created="doStuff(index)"
实际上，您可以在您的 apk 元素的 created 钩子中发出 cutom 事件：this.$emit('created') 并像上面描述的那样捕获它。

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

我发现如果你在 v-for 中给 'ref' 赋予相同的名称，像这样：

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

然后你会发现它们只是存储在一个名为“bar”的数组中，你可以通过以下方式访问它们：

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

【讨论】：