v-on:click does not work (vue.js)

Question

I try to get into vue.js and I'm stuck.

Html page:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="test.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="exampleFunction">General</button>
    </div>
</body>
</html>

test.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
   created: function () {
       console.log('Vue instance was created');
   },
   methods:  {
       exampleFunction: function () {
           console.log('This is an example function');
       }
   },
   destroyed: function () {
       console.log('Vue instance was destroyed');
   }
})

app.exampleFunction();

Console output:

Vue instance was created
This is an example function

The problem is that the button does not work, it's writing nothing on the console when I click.

Any suggestion?

Actually in your console output I see "This is an example function", that's the log printed out by exampleFunction, that's bound to the :click directive. — P3trur0
– P3trur0, Commented Feb 16, 2018 at 11:14
Your code seems to be working fine to me. But, try replacing it with: <button @click="exampleFunction()">General</button> — haMzox
– haMzox, Commented Feb 16, 2018 at 11:31
The console output contains only the result of the call from the js itself (declared after the Vue object), it should add a line each time I click. — B. Bri
– B. Bri, Commented Feb 16, 2018 at 12:26

Roy J · Accepted Answer · 2018-02-16 12:54:23Z

6

It works fine in a snippet. You might want to wrap your Vue call in DOMContentLoaded to ensure the DOM is there before Vue tries to attach to it, as I did below.

document.addEventListener("DOMContentLoaded", function(event) {
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    created: function() {
      console.log('Vue instance was created');
    },
    methods: {
      exampleFunction: function() {
        console.log('This is an example function');
      }
    },
    destroyed: function() {
      console.log('Vue instance was destroyed');
    }
  })

  app.exampleFunction();
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <button v-on:click="exampleFunction">General</button>
</div>

answered Feb 16, 2018 at 12:54

Roy J

44k10 gold badges84 silver badges106 bronze badges

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

1 Comment

B. Bri Over a year ago

It works fine with the DOMContentLoaded, thanks for the clear explanation.

bencodezen · Accepted Answer · 2018-02-16 20:53:58Z

The problem is that you are loading your test.js script before the DOM elements are created on the page. In other words, the script is executing on the page before anything is created.

While the DOMContentLoaded is one way to solve the problem, I would recommend moving your script tags to the bottom of the body element. Remember that <script> tags are render blocking and are usually offloaded to the bottom of the <body> element to improve performance as well. By doing so, it should also resolve your issue as well.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <button v-on:click="exampleFunction">General</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="test.js"></script>
</body>
</html>

You can see my example here https://codepen.io/BenCodeZen/project/editor/XWMNNg

Jaskaran Singh · Accepted Answer · 2018-02-16 13:01:45Z

0

There is nothing wrong with your code. That code is working absolutely fine in my browser.

Delete your browser's cache and try again

answered Feb 16, 2018 at 13:01

Jaskaran Singh

9248 silver badges8 bronze badges

Collectives™ on Stack Overflow

v-on:click does not work (vue.js)

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related