访问Vuejs组件内部的元素

Question

我正在尝试从我的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>

- bencarter78

---

应该删除 template: "report-criteria" 这一行。 - Jeff

Answer 1

这个答案是针对VueJS 1.x的，由@nils发布。在更新的版本中，v-el指令已被删除。它被ref属性所取代。

要在VueJS 2.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文档中获取有关该更改的更多信息。

- Gustavo Straube

---

请注意，此示例对于Vue 2是不正确的，该方法被称为“mounted”，而不是“ready”：https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram - Diego

嘿，@Diego！感谢你提醒我。我把重点放在指令上了，没有注意到那个问题。我刚刚更新了示例代码。 - Gustavo Straube

Answer 2

VueJS 1.x

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

另外，据我所知，你不应该将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>

- nils

Answer 3

以下是对我有效的步骤：

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

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

在脚本中定义一个布尔变量：

shown = false

在更新生命周期钩子中，保留以下代码：

update(){

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

}

在您的函数内将布尔值更改为“true”，如下所示的代码：

test(){

this.shown = false
....
some code
....

this.shown = true // this will trigger the code written in the update hook

}

- rhythmo