0

I've written a basic component just to display my component once I scroll past it's position, so obviously this will be a sticky navigation.

I'm getting the following error:

TypeError: Cannot read property 'remove' of undefined"

So obviously this.$el is undefined however it shouldn't be!

Below is my component:

<script>
    export default {
        data: function() {
            return {
                display: true,
                element: null
            }
        },
        render() {
            return this.$scopedSlots.default({
                display: this.display
            });
        },
        mounted() {
            window.onscroll = this.func();
        },
        methods: {
            func: function() {
                let sticky = this.$el.offsetTop;
                if (window.pageYOffset > sticky) {
                    this.$el.classList.add("sticky");
                    this.display = true;
                } else {
                    this.$el.classList.remove("sticky");
                    this.display = false;
                }
            }
        }
    }
</script>
Martyn Ball
  • 4,679
  • 8
  • 56
  • 126
  • 1
    Unless your code is actually `window.onscroll = this.func;`, I don't believe you'd get this error (nor would you code do what you think it should). This is a common problem when assigning instance methods to event handlers and there are many duplicates around. – Phil Nov 29 '18 at 23:25
  • **TL;DR** `window.onscroll = () => { this.func() }` – Phil Nov 29 '18 at 23:27
  • 1
    FYI, Vue has no `render` [lifecycle hook](https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks) – Phil Nov 29 '18 at 23:29

0 Answers0