[Vuejs]-VueJS – @click not adding listener/working

by

0👍

It seems your codes should work for clicked effect.

But you should fix the Arrow function (lambda) usage for Vue methods, it will cause the context of that method is not Vue instance if using Arrow function (lambda).

Look into below snippet (check the console output for clickEffect/clickEffect1 when click ‘Test’):

var buttonClick = new Vue({
    el: '#topbar',
    data: {
        clicked: false,
    },
    methods: {
        clickEffect: function(event) {
            console.log('function', this.$data)
            let el = event.target;
            el.classList.add("clicked");
            setTimeout(function() {
                el.classList.remove("clicked");
            }, 1500);

        },
        clickEffect1: (event) => {
            console.log('lambda', this.$data)
        },
        ChangeVideos: function () {
        }
    }
});
.clicked {
  background-color:red
}
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<header id="topbar">
    <div id="app-menu">
        <i id="app-icon" @click="clickEffect($event);clickEffect1()" class="fa fa-bars">Test</i>
        <form id="searchVideos" action="#" method="POST">
            <label>
                <i class="fa fa-search"></i>
                <input v-on:keyup="ChangeVideos" type="text" class="search" placeholder="Search anything">
            </label>
            <label class="label-videos" @click="clickEffect($event)" id="videos-mine">
                <input type="radio" checked name="search-val">
                <i class="fa fa-user"></i>
            </label>
            <label class="label-videos" v-on:click="clickEffect($event)" id="videos-all">
                <input type="radio" name="search-val">
                <i class="fa fa-users"></i>
            </label>
        </form>
        <div class="login">
            <a href="#" class="btn">Login</a>
        </div>
    </div>
</header>

Leave a comment