VueJs - 如何从$ refs访问元素的DOM属性

Question

我有一个元素

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

在我的模板中。我需要访问/编辑DOM属性，如scrollTop，<tr>元素的verticalOffset。我怎样才能做到这一点？

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

以下是显示console.log(this.$refs)

的快照

console.log(this.$refs[userIndex])

console.log(this.$refs[userIndex][0])

正如您所知，当我使用this.$refs[userIndex][0]时，我看不到DOM属性

Answer 1

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

只需引用this.$refs[userIndex][0]代替this.$refs[userIndex][0].$el。

要在控制台中查看该元素的属性，您需要使用console.dir代替console.log。 See this post.

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

Answer 2

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

打开浏览器控制台并运行此工作代码段：

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)
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<table><tbody ref="tbody">
  <tr :ref="userIndex" v-for="(userData, uid, userIndex) in users" :key="uid">
  <td>{{userData}}: {{userIndex}}</td>
  </tr>
</tbody>
</table>
</div>