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) 会导致该方法的上下文不是 Vue 实例>.

查看下面的 sn-p（单击“测试”时检查控制台输出的 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>