关于vue.js：VueJs-如何从$ refs访问元素的DOM属性


VueJs - How to access DOM property of an element from $refs

我有一个元素

1
2
<tbody ref="tbody">
  <tr class="row" :ref="userIndex" v-for="(userData, uid, userIndex) in users" :key="uid">

在我的模板中。 我需要访问/编辑DOM属性，例如

元素的scrollTop，verticalOffset。 我该如何实现？

我尝试使用this.$refs[userIndex][0].$el访问，但无法正常工作。 我可以在控制台中看到所有属性，但无法访问它们。 但是this.$refs.tbody.scrollTop可以工作。

以下是显示console.log(this.$refs) enter image description here的快照

console.log(this.$refs[userIndex])
enter image description here

console.log(this.$refs[userIndex][0])
enter image description here

如您所见，当我使用this.$refs[userIndex][0]时，我没有看到DOM属性

如果$ref对象是Vue组件，则仅具有$el属性。 如果将ref属性添加到常规元素，则$ref将引用该DOM元素。

只需引用this.$refs[userIndex][0]而不是this.$refs[userIndex][0].$el。

要在控制台中查看该元素的属性，您需要使用console.dir而不是console.log。 看到这篇文章。

但是，您可以像访问其他任何对象一样访问元素的属性。 因此，您可以例如通过console.log(this.$refs[userIndex][0].scrollTop)记录scrollTop。

相关讨论

我不认为verticalOffset存在。 offsetTop可以。 要控制台记录Dom元素及其属性，请使用console.dir

打开浏览器控制台并运行以下代码段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var app = new Vue({
  el: '#app',
  data: {
    users: {
      first: {
        name:"Louise"
      },
      second: {
        name:"Michelle"
      }
    }
  },
  mounted() {
    console.dir(this.$refs[1][0])
    console.log('property: ', this.$refs[1][0].offsetTop)
  }
})
1
2
3
4
5
6
7
8
<script src="https://unpkg.com/vue/dist/vue.js">

<table><tbody ref="tbody">
  <tr :ref="userIndex" v-for="(userData, uid, userIndex) in users" :key="uid">
  <td>{{userData}}: {{userIndex}}</td>
  </tr>
</tbody>
</table>

相关讨论