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

Question

我有一个元素

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

在我的模板中，我需要访问/编辑像<tr>元素的scrollTop、verticalOffset等DOM属性。我该如何实现？

我已经尝试使用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属性。

- nbbk

Answer 1

$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。

- thanksd

---

如果您想查看元素的属性，请使用 console.dir。 - thanksd

值得一提的是，this.$refs.refName 总是一个数组。即使您期望引用只有一个元素，它仍然会被放在一个数组中。我曾经忽略了这一点，结果让我盯着我的代码看了几分钟。 - sr9yar

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>

- François Romain

---

我的错。我正在检查 verticalOffset。 - nbbk