The computed property "counter" is already defined in data

vue.js

14,023

You have a counter property in your data and you also have a counter computed value. To fix your code, just remove the counter from data.

data:{
  clicks : 0
},

This is addressed in the comments of the video you linked. If you notice, he never actually runs the code after he adds the computed.

That said I used his videos and courses as a resource myself when I was starting out. They are for the most part excellent.

14,023

Greenonline

Happily Deranged Interested in: Drones 3D Printers (P3Steel v4 and Kossel) Synths and sequencers (CD4017 etc.) Building storage servers UI/UX Macs and iPhone repair Coding/Scripting and Testing software/hardware Hardware: Arduino Pi Macs Z80/68030 OS: iOS MacOS OS X Linux Software/Scripting: C/C++ Java Pascal Assembler (Z80/8086/68k) Perl Python Bourne, bash, csh

Updated on June 21, 2022

Comments

Greenonline almost 2 years

This is my code

<html>
<head>
    <script src="https://unpkg.com/vue"></script>
    <meta charset="utf-8">
</head>
<body>
   <div id="app">
       <button v-on:click="increase">plus</button>
       <p>Counter : {{ counter }}</p>
       <p>Clicks : {{ clicks }}</p>
    </div>

   <script>
       var app = new Vue({
           el:'#app',
           data:{
               counter : 0,
               clicks : 0
           },
           methods:{
            increase(){
                this.clicks++;

            }        
           },
           computed:{
            counter: function(){
                return this.clicks * 2;
            }

           } 
       });
    </script>

</body>
</html>

When I click on the button, the counter should double the number of clicks displayed, but it's not working.

This code is working though: COMPUTED PROPERTIES | VueJS 2 | Learning the Basics.