Vue.js 2 Cookbook

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',   data: {     name: 'John'   },   computed: {     computedFullName () {       return this.name + ' ' + surname     }   },   methods: {     saveSurname () {       surname = this.$el.querySelector('#surname').value     }   } })

Running this example will display two input fields: one for the name and one for the surname, and one button specifically to save the surname. Examining the JavaScript code will reveal that while the name is declared in the data section ...