在计算属性中访问 $el

Question

我试图在计算属性中访问 this.$el.offsetTop，但得到错误：

Cannot read property 'offsetTop' of undefined

如何在计算方法中访问组件的 offsetTop？如果这是不可能的，那么还有其他选择吗？

成分：

<template>
    <div :class="{ 'active' : test }"></div>
</template>
<script>
export default {

    computed: {

        test() {
           console.log(this.$el.offsetTop);
        }
    }
}
</script>

Answer 1

如果计算出的属性是在模板中使用，它的方法将火被安装在Vue的实例之前，所以this.$el会undefined。

如果您的计算属性依赖于 的某些属性this.$el，您可以将其设置为mounted钩子中的数据属性（this.$el将在何处定义）。

在你的情况下：

<template>
  <div :class="{ 'active' : test }"></div>
</template>

<script>
export default {
  data() {
    return { offsetTop: null };
  },
  computed: {
    test() {
      console.log(this.offsetTop);
    }
  },
  mounted() {
    this.offsetTop = this.$el.offsetTop;
  }
}
</script>