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