[Vuejs]-Vuejs2 onclick will not call defined method function

by

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

👤ittus

0👍

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.

  1. Install Vue-CLI
  2. vue create my-project
  3. 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>
👤tim

Leave a comment