Seems like a simple task, but it's not working for me. Maybe because I'm new to VueJS. I downloaded this repository: https://github.com/creotip/vue-particles. I want to use this style to create an under construction page.
The issue is that I need to create a hamburger menu icon in the top right corner, which when clicked should call a method to show and hide a div (very basic stuff). I've followed Vue JS tutorials and advice from Stack Overflow, but my template doesn't seem to be communicating with the method.
Every time I click on the hamburger button, I get an error "_vm.hello is not a function". What am I doing wrong? Please refer to the screenshot attached. There must be a simple solution to this problem.
This is how my code looks:
app.vue
<template>
<div id="app">
<div class="wrap-banner">
<div class="button_container" @click="hello()">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</div>
</template>
main.js
import Vue from 'vue'
import App from './App'
import Home from './components/home'
Vue.use(Home)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App },
methods: {
hello: function() {
alert('hello')
}
}
})
Screenshot