VueJS按键查找元素

Question

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

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

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

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

Answer 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']等等.

希望这可以帮助.

Answer 2

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

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

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

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

Answer 3

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