You may have an infinite update loop in a component render function?

Question

I'm new to Vue.js . My function instead of increasing my variable to 1, increases it to any random number. The console shows this error:

"You may have an infinite update loop in a component render function"`.

What can be wrong?

<template lang="pug">
  #homepage
    .workArea
      button(
          v-on:click='clicker'
          ) 
            |click me
      p      
        |{{clicker()}}

</template>
<script>
export default {
  name: "test",
  data: () => ({
    a: 0,
  }),
  methods: {
    clicker() {
      return this.a++
    },
  },
}
</script>

Answer 1

Your code is ok except the part about outputting the value. You should use {{a}} to show the data.

<template lang="pug">

#homepage
    .workArea
      button(
          v-on:click='clicker'
          ) 
            |click me
      p      
        |{{a}}

</template>
<script>
export default {
  name: "test",
  data: () => ({
    a: 0,
  }),
  methods: {
    clicker() {
      return this.a++
    },
  },
}
</script>

Answer 2

You are calling clicker method on button click.

So, button click increment the a . Once the a is updated Vue instance tries to re-render the view. At this time instead of simply printing the value of a , method call inside string interpolation causes to increment a again. This goes on a continues loop.

Hope the problem is clear. Just put change {{clicker}} to {{a}}