访问Vuejs组件内部的元素

Accessing an element inside a Vuejs component

本文关键字：元素 内部 组件 Vuejs 访问      更新时间：2023-09-26

我试图从Vue组件中的dom访问一个元素，但我只得到了"null"。如果我进入开发工具并尝试，我可以访问它。我认为这是一个范围问题，但我找不到答案。

<template>
    <ul class="list-group" id="criteria" v-for="item in criteria">
        <li class="list-group-item">{{ item.name }}</li>
    </ul>
</template>
<script>
    export default {
        template: "report-criteria",
        data() {
            return {
                criteria: []
            }
        },
        ready() {
            console.log(document.getElementById('criteria'));
        },
        methods: {},
    };
</script>

@nils发布的答案适用于VueJS 1.x。v-el指令在较新版本中被删除。它被ref属性所取代。

为了在VueJS2.x中实现同样的结果，您应该执行以下操作：

<template>
  <ul class="list-group" id="criteria" ref="criteria" v-for="item in criteria">
    <li class="list-group-item">{{ item.name }}</li>
  </ul>
</template>
<script>
  export default {
    data() {
      return {
        criteria: []
      }
    },
    mounted() {
      console.log(this.$refs.criteria);
    },
    methods: {},
  };
</script>

您可以在VueJS文档中找到有关该更改的更多信息。

VueJS 1.x

使用v-el指令可能更容易，它允许您将组件中的元素映射到this.$els上的vm属性。

此外，对于AFAIK，您不应该将template属性与.vue文件中的模板组合（当然，假设您使用的是.vue文件）。

<template>
    <ul class="list-group" id="criteria" v-el:criteria v-for="item in criteria">
        <li class="list-group-item">{{ item.name }}</li>
    </ul>
</template>
<script>
    export default {
        data() {
            return {
                criteria: []
            }
        },
        ready() {
            console.log(this.$els.criteria);
        },
        methods: {},
    };
</script>

以下是对我有效的步骤：

  1. 在html元素中引用$ref：

 <p ref = "myref">Welcome to myApp</p>

  1. 在脚本中定义布尔变量：
shown = false
  1. 在更新生命周期挂钩中，保留以下代码：

update(){
  if(this.shown){
       
     console.log(this.$refs.myref)
     your code
  
  }
}

  1. 将布尔值更改为"；真"；在函数内部，如以下代码所示：

test(){
this.shown = false
....
some code
....
this.shown = true // this will trigger the code written in the update hook
}

相关文章：