The calculated props do not work Vue JS 2

Question

im learning vue js after the channel on YT, the video was sent last year, so I think it doesn’t work due to some changes on VueJS itself, but it would be great if you guys could help me with this

codeio link: http://codepen.io/myrgato/pen/BWWxdQ

HTML

<script src="https://unpkg.com/vue@2.2.2"></script> <div id="app"> <button @click="increment">Increment</button> <p>Counter: {{counter}}</p> <p>Clicks: {{clicks}}</p> </div> 

Js

 new Vue({ el: '#app', data: { counter: 0, clicks: 0 }, methods: { increment(){ this.clicks++; } }, computed: { counter(){ return this.clicks * 2; } } }); 

It is supposed to calculate the number of clicks, and then use the calculated proprerty to display a counter equal to clicks two times, but for some reason it does not work.

Answer 1

Here is a working solution. The trick is this:

• use a different name for the computed property (here counter2 )
• and use a lambda function with a single parameter (here x ) instead of this .

 new Vue({ el: '#app', data: { counter: 0, clicks: 0 }, methods: { increment() { this.clicks++; } }, computed: { counter2: x => x.clicks * 2 } }); 

 <script src="https://unpkg.com/vue@2.2.2"></script> <div id="app"> <button @click="increment">Increment</button> <p>Counter: {{counter2}}</p> <p>Clicks: {{clicks}}</p> </div> 

Answer 2

Short but complete answer:

Never use the same name for the variable data and computed .

Think about the data and compute it as the same object so that the names are not duplicated.

Answer 3

Since I was not sure why this happened, I conducted two tests on jsFiddle:

Sample A:

sample B

Here you notice that in Example B, the execution order is:

• First, data properties are added.
• The created hook is called.
• The calculated property calculates the counter value.

In Example A, step 3 never occurs.

In vue2.1.0 you will get a warning:

Vue warn : an existing instance property of "hasTrigger" will be overwritten by the computed property of the same name.

---

Further verification in the documents, I found that this warning was suppressed in vue 2.2.2, so you did not receive it, but along with this I found this interesting article:

Requisites and calculated properties are now defined in the prototype of the component, and not as self properties for each instance. This avoids many calls to Object.defineProperty and improves component initialization performance. This will only affect you if you rely on hasOwnProperty checks on details and computed properties, which should be extremely rare, but we document it here to be explicit regarding the changes.

A source

 var fancyConstructor = function () { this.value = 5 } var instance = new fancyConstructor() fancyConstructor.prototype.value = 5000 fancyConstructor.prototype.someOtherValue = 5000 console.log(instance.value) console.log(instance.someOtherValue) 

you can also delve into each component to find that the truly computed properties are set to counter .

The above snippet illustrates what happens if a property with the same name is present on both the object and the prototype.