V-on:click handler function is not executed on netlify, despite locally working fine

Support
1

Hello. This is the website that I am having troubles with: [https://sad-murdock-40897c.netlify.app]

Let me give you a brief description of the problem.

I have deployed a Vue.js website from my github repository, master branch. Everything works fine, except the hamburger menu that I have implemented. The hamburger menu icon is a svg img that I have included in the vue component named TheHomePageHeader.vue and to witch I attached a v-on:click handler which is supposed to trigger an overlay menu to display.

On localhost, the hamburger menu works as expected, but on Netlify it doesn’t, despite redoplying the site multiple times, making sure that all the canges are commited to the remote branch from github repository. The hamburger menu icon appears, but when I click on it, nothing happens.

I placed a console.log() in the v-on:click handler function to see if clicking on the hamburger menu enters the handler function at least, and it actually doesn’t, since nothing is printed to the console. It seems that the function the I specified for v-on:click is not executed when required, even though, as I have mentioned, on localhost it works and the message printed to the console appears. I am totally cconfused why is this difference.

I would really appreciate some help, I think I do some tiny mistake that ruins my menu :slight_smile:

UPDATE: I attached the v-on:click function to the logo of the page as well, just to test if the problem persists. Unfortunately, it persists. Again, although it works on localhost, on netlify build site it doesn’t print the console.log() and nor triggers the overlay menu :frowning:

The code for the vue component where this issued occurs (TheHomePageHeader.vue) is:

<template>
<section id='wrapper-the-home-page-header'>
    <div id="navigation-bar" class='main-section'>
        <img src="../assets/images/logo.svg" alt="">
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#de-ce">De ce am nevoie?</a></li>
                <li><a href="#ce-presupune">Ce presupune?</a></li>
                <li><a href="#documente">Documente</a></li>
                <li><a href="#faq">FAQ</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>            
        </nav>
        <img src="../assets/images/hamburger-menu-icon.svg" alt="" v-on:click="onHamburgerMenuClick()">
    </div>
</section>

<script lang='ts'>
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import ScrollIndicator from './ScrollIndicator.vue';


@Component({
    components: {
        ScrollIndicator
    }
})
export default class TheHomePageHeader extends Vue {
   onHamburgerMenuClick() {
        console.log(`Opening hamburger menu ${this.$store.state.isOverlayMenuOpen}`);
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
        this.$store.commit("openOverlayMenu");
   }
}

<style lang='scss' scoped>
#wrapper-the-home-page-header {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 90;

    #navigation-bar {
        display: flex;
        align-items: center;
        height: 10vh;
        width: 100%;
        background-color: $base-white;
            
        > img {
            &:first-of-type {
                margin-left: 30vw;
                height: 3.7vh;
                @media all and (max-width: 1310px) {
                    margin-left: 0vw;
                }
            }

            &:last-of-type{
                width: 3rem;
                margin-left: auto;
                cursor: pointer;
                @media all and (min-width: 1310px) {
                    display: none;
                } 
                
                @media all and (max-width: 650px) {
                    width: 1.9rem;
                }   
            }
        }

        > h1 {
            margin-left: auto;
        }
        > nav {
            @media all and (max-width: 1310px) {
                display: none;
            }
            margin-left: auto;
            > ul {
                list-style: none;
                display: flex;
                > li {
                    margin-left: 3.5vw;
                    > a {
                        text-decoration: none;
                        color: $base-dark-gray;
                        font-size: 0.88rem;
                    }
                }
            }
        }
    }
}
2

Hey @skoda888,

It seems that you’re calling the method in your click handler. Since this method is executed on click, you don’t have to execute it, so v-on:click="onHamburgerMenuClick" should suffice. You might also want to add a .prevent to your click so v-on:click.prevent to prevent any default DOM events from firing that may interfere with your method being called.

Additionally, I’d suggest updating where you attach the click handler. It’s generally not semantic to attach a click handler to an image. This is likely not the cause of your issue, but it would help make the markup a bit clearer. Try wrapping the img in a button, or a div and attach the click handler to that.

Hope that helps!
Divya

1 Like
3

Thanks for the answer. Everything you proposed seems totally correct, but the on-click method still doesn’t get called on click on netlify, but on my localhost it does.

Cannot imagine where does this difference come from… The event listener is not triggered on click as it would be supposed to for a reason I don’t know

<template>
<section id='wrapper-the-home-page-header'>
    <div id="navigation-bar" class='main-section'>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#de-ce">De ce am nevoie?</a></li>
                <li><a href="#ce-presupune">Ce presupune?</a></li>
                <li><a href="#documente">Documente</a></li>
                <li><a href="#faq">FAQ</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>            
        </nav>
        <button class="hamburger-menu-icon-button" v-on:click.prevent="onHamburgerMenuClick">
            <img src="../assets/images/hamburger-menu-icon.svg" alt="" class="hamburger-menu-icon">
        </button>
    </div>
</section>
4

Just checked the link to your site again and saw that you managed to get it working! Nice one!

1 Like
5

Yes :slight_smile: Forgot to come back with an update. The problem was with an ill-made pre-rendering. Thanks for support again :smiley:

1 Like