CODEWITHSUNDEEP
vuejs2
Sai Manoj
Sai Manoj

Reputation: 3859

How to display the value which is inside computed in VueJS2?

How to display the value which is inside computed in VueJS2 ? Actually i'm trying to return the value click*2 using computed property. So i'm displaying the output using the expression {{counter}}. But i'm not getting any output, at first it was set to counter to 0 (stored in the data). Even i didn't use v-once. So why my counter value is not updating through computed property?

 <div id="app4">
    <p>counter : {{ counter }}</p>
    <p>clicks : {{ click }}</p>
    <button v-on:click="increment">increment</button>
  </div>

    <script>
      var vm = new Vue({
        el: '#app4',
        data: {
           counter:0,
           click: 0,
        },
       methods: {
           increment() {

               this.click++;
           }
       },
       computed: {
           counter() {
               return this.click * 2;
           }
       }
     });
    </script>

Upvotes: 1

Views: 141

Answers (1)

dziraf
dziraf

Reputation: 3653

Remove counter from data and it will work. You have two properties that shadow one another - one in data and the other in computed.

Upvotes: 3

Related Questions