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>

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

1 个答案: