Я, наконец, понял это. В консоли было предупреждение о имени компонента и имени основного файла. Я переименовал основной файл, и Vue снова начал работать.
Остерегайтесь двусмысленного наименования :)
Я пытаюсь добавить прослушиватель событий событий для DOM. Все скрипты в комплекте с webpack, который компилирует его в один большой файл.
Это мой компонент:
<template>
<div class="formchat-window">
<a>test</a>
<div class="title" v-on:click.self="toggle">Nevite 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)
});
Однако я сделал все, и компилятор отлично работает, я не могу зарегистрировать клик, поэтому метод не будет запускаться.
Кто-нибудь может мне помочь, пожалуйста!