Vue.js - 无法添加点击事件答案

【问题标题】：Vue.js - cannot add click eventVue.js - 无法添加点击事件
【发布时间】：2018-12-16 09:01:37
【问题描述】：

我正在尝试为 DOM 添加点击事件侦听器。所有脚本都与 webpack 捆绑在一起，将其编译为 1 个大文件。

这是我的组件：

<template>
    <div class="formchat-window">
        <a>test</a>
        <div class="title" v-on:click.self="toggle">Nevíte si rady? Zeptejte se!</div>
        <wp-formchat-screen v-if="windowActive"></wp-formchat-screen>
    </div>
</template>

<script>
    export default {
        mounted () {
            console.log('mounted');

        },

        methods: {
            toggle(event) {
                alert('click on toggle');
                this.windowActive = !this.windowActive;
            }
        },

        data() {
            return {
                windowActive: false,
            };
        }
    }
</script>

<style lang="scss">
    $color: red;

    .formchat-window {
        position: fixed;
        right: 10%;
        bottom: 0;
        width: 300px;
        z-index: 9999;
        .title {
            background: $color;
        }
    }
</style>

这是我的主要 JS 文件：

import Vue from 'vue'
import FormChat from './FormChat'

import FormchatAnswer from './components/FormchatAnswer'
import FormchatEntry from './components/FormchatEntry'
import FormchatScreen from './components/FormchatScreen'
import FormchatWindow from './components/FormchatWindow'


window.Vue = Vue;


console.log('test');

Vue.component('WpFormchatAnswer', FormchatAnswer);
Vue.component('WpFormchatEntry', FormchatEntry);
Vue.component('WpFormchatScreen', FormchatScreen);
Vue.component('WpFormchatWindow', FormchatWindow);

const app = new Vue({
    el: '#wp-formchat-vue-root',
    //render: h => h(FormChat)
});

但是我做了所有事情并且编译器工作正常，我无法注册点击，所以该方法不会触发。

谁能帮帮我？

【问题讨论】：

您的代码工作正常，点击工作正常。在别处查找错误。

标签： onclick vuejs2 vue-component

【解决方案1】：

我终于明白了。在控制台中，有关于组件名称和主文件名的警告。我已经重命名了主文件，Vue 又开始工作了。

谨防模棱两可的命名:)

【讨论】：