vuejs2 onclick will not call defined method function

Question

Very simple but seems to not be working. Must be because i'm new to VueJS. I downloaded this repo https://github.com/creotip/vue-particles. As I want to create a under construction page using this style.

Problem: I need to create a hamburger menu icon in the top right hand corner which on click calls a method to hide and show a div ( really basic stuff ). I've followed the vue JS tutorials and what people have said on stack overflow but I just cant get my template to speak to the method.

When I click on the hamburger button i keep getting "_vm.hello is not a function". What am i doing wrong? Please see screenshot. There must be something simple to solve this.

Heres what my code looks like:-

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

move methods: { hello: function() { alert('hello') } } to app.vue then try again. App.Vue is one component within #app at here because you defines template: '<App/>', components: { App }, — Sphinx
– Sphinx, Commented May 9, 2018 at 23:12

ittus · Accepted Answer · 2018-05-09 23:22:40Z

3

You need to move hello method to App.vue

App.vue

   <template>
  <div id="app">
   <div class="wrap-banner">
      <div class="button_container" @click="hello">
        Demo Panel
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {
    hello: function() {
      alert("hello");
    }
  }
};
</script>

main.js

import Vue from "vue";
import App from "./App";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

Checkout demo at https://codesandbox.io/s/8y5yzv00nj

answered May 9, 2018 at 23:22

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Max Silva Over a year ago

Hi. Thank-you I cant believe I didn't try this. My next question is why does the the <script></script> need to be with the .app.vue file. I like my javascript separate from html files?

ittus Over a year ago

You can check document about Vue Single File Component at vuejs.org/v2/guide/single-file-components.html As I understand, App.vue and Vue component in main.js are 2 separate component. That's why hello method is not available in App.vue in your initial code

tony19 · Accepted Answer · 2022-07-16 03:19:19Z

Vue File Architecture

You need to be aware that a Vue file normally has 3 components (HTML, Js and CSS). This file then needs to be processed with a compiler (babel for example) in order to make it readable for the browser. See Vue Single File Components for more information.

Clean Solution

The vue-cli gives you a working starter template with babel and webpack all preconfigured. Just create a vue project and change the template as needed.

Install Vue-CLI
vue create my-project
npm run dev

Quick Solution

If you do not want to use a compiler, just implement it like following:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    hello: function() {
        alert('hello')
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <button @click="hello()">Click me</button>
</div>

Collectives™ on Stack Overflow

vuejs2 onclick will not call defined method function

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related