Question

我正在尝试在计算属性中访问此。$ 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>

Answer 2

这是我解决此问题的方法：

我在组件的el中将null属性设置为data，并在已安装的挂钩中将this.el设置为this.$el。然后，在计算的属性中，在尝试访问其属性之前，请检查this.el，以避免在第一次渲染期间出错。因此，在您的示例中，我们将拥有：

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

    computed: {
        test() {
            return this.el ? this.el.offsetTop : 0;
        }
    },

    mounted(){
        this.el = this.$el;
    }
}
</script>

作为旁注，我认为您无法访问Vue.js计算属性中的控制台，因此我删除了该位。

在计算属性中访问$ el

2 个答案: