The computed property "counter" is already defined in data

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.

Share:
14,023

Related videos on Youtube

Greenonline
Author by

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
    Greenonline over 1 year

    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.