Learning how to use computed properties

Computed properties are data in Vue components that depend on some calculation on other, more primitive data. When this primitive data is reactive, the computed properties are up-to-date and reactive themselves. In this context, primitive is a relative term. You can certainly build computed properties based on other computed properties.

Getting ready

Before venturing to prepare this recipe, be sure to familiarize yourself with the v-model directive and the @event notation. You can complete the React to events like clicks and keystrokes recipe in the preceding chapter if you are unsure.

How to do it...

A simple example will clarify what a computed property is:

<div id="app"> 
  <input type="text" v-model="name"/> 
  <input type="text" id="surname" value='Snow'/> 
  <button @click="saveSurname">Save Surname</button> 
  <output>{{computedFullName}}</output> 
</div> 

let surname = 'Snow' 
new Vue({ 
  el: '#app...