Where/How do I define variables in data for Vue Js methods?

Question

I'm learning Vue Js and have created a simple button counter and in my methods object I created a click function to increment my counter variable. I added counter to data but it keeps telling me counter isn't defined in count().

<template>
   <div class="button-container">
      <button class="counter-button" v-on:click="count">Click Me</button>
      <p>Button has been clicked {{ counter }} times</p>
   </div>
</template>

<script>
   export default {
      name: 'AnotherComponent',
      data: function() {
         return {
            counter: 0
         }
      },
      methods: {
         count: function() {
            counter++;
         }
      }
   }
</script>

tony19 · Accepted Answer · 2022-07-15 01:53:02Z

2

Your code is looking for a local variable called counter, but you never defined that.

Instead, you have to reference the instance property using this.counter:

 count: function() {
    this.counter++;
 }

See https://v2.vuejs.org/v2/guide/index.html#Handling-User-Input for a complete example.

edited Jul 15, 2022 at 1:53

tony19

140k24 gold badges281 silver badges354 bronze badges

answered May 25, 2018 at 18:49

str

45.5k18 gold badges117 silver badges134 bronze badges

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

Collectives™ on Stack Overflow

Where/How do I define variables in data for Vue Js methods?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related