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

Question

我有一个元素

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

在我的模板中。我需要访问/编辑 DOM 属性，例如 <tr> 的 scrollTop、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)。