VueJS - @click不添加监听器/工作

Question

很抱歉在Vue有点新手。我试图找出为什么我的一个点击功能没有触发多个元素。

＃app-icon上的点击工作正在进行。但是，该函数不会触发任何标签（或甚至添加事件监听器）。

我有一个基于HTML的结构：

<header id="topbar">
    <div id="app-menu">
        <i id="app-icon" @click="clickEffect($event)" class="fa fa-bars"></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>

和我的VueJS脚本：

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

        }
    }
});

Answer 1

您的代码似乎适用于clicked效果。

但是你应该修复Vue方法的箭头函数（lambda）用法，如果使用箭头函数（lambda）

查看下面的代码段（单击'Test'时，检查clickEffect / clickEffect1的控制台输出）：

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>