访问Vuejs组件内的元素

JavaScript

用户7049302300

2020-03-12

我试图从我的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>

有人可以帮忙吗？

第1266篇《访问Vuejs组件内的元素》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答

逆天小卤蛋Green 2020.03.12

我遇到了同样的问题，我提到了互联网上所有可用的答案，但似乎没有任何效果。最后，这对我有用

步骤1）

在html元素中引用$ ref

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

第2步）

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

显示=错误

STEP3）

在更新生命周期挂钩中，保留此代码

update(){

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

}

步骤4）

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

test(){

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

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

}

这对我有用。希望这对其他人有帮助...快乐编码:)

LEY乐 2020.03.12

VueJS 1.x

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

另外，对于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>

达蒙西里 2020.03.12

@nils发布的答案适用于VueJS1.x。该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>