CODEWITHSUNDEEP
htmlvue.js
Web Develop Wolf
Web Develop Wolf

Reputation: 6326

Is there something wrong with this Click Event that's Not Working in VueJS?

I'm trying a simple click event in Vue JS, but it doesn't seem to be working. I've checked the console for errors and there's nothing in there when I click the button or before. I'm following a tutorial so as far as I can see it should work? Is there something I've missed or I'm not understanding?

<body>
    <div id="app">
        <!--Listening for a click event-->
        <button v-on:click="increase">Click Me To Increase Counter</button>
        <p>{{ counter }}</p>
      </div>

      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script>
          // Application instance (so here we can technically create two views dependant upon x, y or z)
          new Vue({
            // Element used to bind to
            el: "#app",
            // Data Properties (accessed from object using 'this.property')
            data: {
                counter: 0
            },
            // Element Properties
            methods: {
                increase: function() {
                    this.counter++;
                }
            }
        });
      </script>
</body>

Upvotes: 0

Views: 212

Answers (2)

Mehedi Hasan Ovi
Mehedi Hasan Ovi

Reputation: 57

Brother your Codebase is absolutely fine. It maybe your editor fault. You just put your code in a html file and simply run with a browser. It will work perfectly. Thanks.

Upvotes: 1

Jignesh Raval
Jignesh Raval

Reputation: 607

I also tried the same code in stackoverflow snippet editor and it is working properly. Below is the working example. I hope this will be helpful.

// Application instance (so here we can technically create two views dependant upon x, y or z)
  new Vue({
    // Element used to bind to
    el: "#app",
    // Data Properties (accessed from object using 'this.property')
    data: {
        counter: 0
    },
    // Element Properties
    methods: {
        increase: function() {
            this.counter++;
        }
    }
});
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <!--Listening for a click event-->
  <button v-on:click="increase">Click Me To Increase Counter</button>
  <p>{{ counter }}</p>
</div>

Thanks, Jignesh Raval

Upvotes: 1

Related Questions