2017-06-18 3 views
2

DieserDie berechnete Eigenschaft „Zähler“ ist bereits in Daten definiert

mein 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> 

Wenn ich auf die Schaltfläche klicken, wird die Anzahl der Klicks angezeigt verdoppeln der Zähler sollte, aber es funktioniert nicht.

Dieser Code funktioniert aber: COMPUTED PROPERTIES | VueJS 2 | Learning the Basics.

+0

Wenn Sie sagen, dass es nicht funktioniert, was genau funktioniert nicht? Was macht es? – Greenonline

Antwort

1

Sie haben eine counter Eigenschaft in Ihren Daten und Sie haben auch einen counter berechneten Wert. Entfernen Sie einfach den counter aus Daten, um Ihren Code zu beheben.

data:{ 
    clicks : 0 
}, 

Dies wird in den Kommentaren des von Ihnen verlinkten Videos angesprochen. Wenn Sie bemerken, führt er den Code nie wirklich aus, nachdem er den berechneten Wert hinzugefügt hat.

Das heißt, ich habe seine Videos und Kurse selbst als Ressource verwendet, als ich anfing. Sie sind größtenteils ausgezeichnet.

Verwandte Themen