COMPUTED PROPERTIES¶

Example¶

A simple example to understand computed properties.

Here when I write name , it output initial entry and computed value. Basically we have this user data here and previously when we have used something in this Moustache template, it had to be in the data.

But not now , we have something that it’s not in the data. This user data is being outputted just like we’re used to, but we also have this thing called greeting. And greeting is the computed property. so we have taken v-model that is userdata which is initially an empty string, then we create loops for initial entry which will show whatever we will enter {{userdata}} as it is and for computed value ,where it will output greeting().
In greeting function we can see it is returning “you are a monster {{this.userdata}}”. {{this userdata}} is the name we are entering. So, computed value will show the text along with name entered.

Comparison with methods¶

Here we can see it updates really fast super fast.
Like searching any title really fast.
And can also check the highest and the lowest rating of titles

#So using our computer property in place of data, we have a different view of this data. We have methods like we had before running off of that view instance and then in the computed values we have just another object.

Here I am blurring out the method part , so just to focus on computed property. we have filteredfilms() and inside it we have RegExp to get rid of capitalisation thing - lower and uppercase.
So, the only change we made in computed property code is: instead of v-for=”entry in ratingsInfo” we change it to v-for=”entry in filteredfilms”. Instead of using ratings info like we had in this, in our data property we are just changing it to filtered.

WORKING WITH METHODS

CHALLENGE 2: UPDATING A BLOG