Question

我正在尝试为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)
});

但是我做了所有事情，并且编译器运行良好，我无法注册点击，因此该方法不会触发。

有人可以帮助我吗？

Answer 1

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

提防歧义命名：）

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

1 个答案: