Question

我只是想知道是否可以通过vue的关键属性找到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']等来获取DOM。

希望这有帮助。

Answer 2

我发现，如果您在v-for中为“ ref”指定相同的名称，就像这样：

'use strict';

import express from 'express';
import UserController from '../app/controllers/UserController';

const Router = express.Router();

Router.post('/register', UserController.store);

export default Router;

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

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

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 !");
    }
}

Answer 4

类似的东西可以让您通过键找到组件：

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

还使用mount，因为在将组件添加到dom时会被调用：

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

VueJS按键查找元素

4 个答案:

实施例